React Button Group - Priority Selector
Priority level selector button group for task and issue management forms
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Priority drives triage—clear level selection streamlines task management. This React component combines shadcn/ui's Button and ButtonGroup components for priority selection with stateful variant toggling between descriptive (Low, Medium, High, Urgent) and numbered (P1, P2, P3, P4) priority schemes. Built on Radix UI with variant switching between default (active) and outline (inactive) states using size="sm" for compact form controls, the pattern delivers priority selectors with clear level indication. Perfect for issue tracking systems like Jira or Linear assigning task priority, project management tools categorizing work urgency, support ticket interfaces triaging requests, or any task form where priority should guide workflow ordering—button groups unify priority levels, variant switching communicates selection, multiple labeling schemes accommodate different team conventions.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-forms-2.jsonRelated patterns you will also like
Status Selector
Workflow status selection
Date Selector
Date range presets
Toggle Group
Segmented toggle controls
Select Component
Dropdown selection
Outline Button
Border-style button variant
Destructive Badge
Urgent priority indicators