Shadcn.io is not affiliated with official shadcn/ui
Status Selector
Workflow status selector button group for task progression and state management forms
Status tracks progress—clear state selection enables workflow visibility. This React component combines shadcn/ui's Button and ButtonGroup components for status selection with stateful variant toggling between standard workflow (To Do, In Progress, Review, Done) and simplified states (Backlog, Active, Completed). Built on Radix UI with variant switching between default (active) and outline (inactive) states using size="sm" for compact form controls, the pattern delivers status selectors with clear progression indication. Perfect for project management tools like Trello or Asana tracking task states, development workflows following issue lifecycles, content approval processes managing review stages, or any workflow form where status should reflect progression—button groups unify workflow states, variant switching communicates current status, multiple state models accommodate different processes.
Status Selector preview
Installation
Related Components
Priority Selector
Priority level selection
Date Selector
Date range presets
Toggle Group
Segmented toggle controls
Select Component
Dropdown selection
Badge Component
Status indicators
Outline Button
Border-style button variant
FAQ
Was this page helpful?
Sign in to leave feedback.