React Button Group - Status Selector
Workflow status selector button group for task progression and state management forms
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-3.jsonRelated patterns you will also like
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