React Button Group - Sort Controls
Sort controls button group with field selection and direction toggle for data ordering
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sort determines discovery—ordering controls surface relevant content. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's ArrowUpIcon and ArrowDownIcon for sort field selection with separate direction toggle or inline direction indicators. Built on Radix UI with variant switching between default (active) and outline (inactive) states and conditional icon rendering for sort direction, the pattern delivers sorting controls with clear field and order indication. Perfect for e-commerce platforms sorting products by price or rating, file managers ordering by name or date, data tables enabling column sorting, or any content interface where sort order should guide browsing—button groups unify sort fields, arrows communicate direction, toggle buttons enable quick reversal.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-2.jsonRelated patterns you will also like
View Switcher
Layout mode controls
Filter Chips
Multi-select filters
Data Table
Sortable columns
Outline Button
Border-style button variant
Select Component
Dropdown selection
Basic Button Group
Simple grouped buttons