Shadcn Button Group Sort & View
Button group with dropdown menu and view toggle. Built by composing Button, Button Group, Dropdown Menu. Uses cn alongside the shadcn primitives. A free, open source shadcn button group example you can install with npx shadcn@latest add @reui/c-button-group-32 and edit as your own code.
Button group with dropdown menu and view toggle
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A sort icon menu, a grid or list pair and a filled Add New menu in one row, with only the view pair joined
When to use
- Toolbars of related actions joined into one strip, such as editor, media, zoom or export controls
- Split buttons that pair a main action with a chevron menu of its variants, such as Save or Publish
- Segmented pickers and filter bars that join buttons to selects, inputs, counters and status text
When not to use
- A 2 way view choice whose pressed option must reach screen readers: use the Toggle Group component
- A text field with an icon, prefix or action drawn inside its own border: use the Input Group component
- A single standalone action, or actions spaced apart with no shared border: use the Button component
Agent notes
viewonly moves thebg-mutedshade between the 2 buttons; render your grid or list from it- On the base twin only children with a
data-slotjoin at the seams, while radix joins every child; wrap custom markup inButtonGroupText ButtonGroupsetsrolegroup but no name; passaria-labelso screen readers say what the set controls
https://reui.io/components/button-group/c-button-group-32.mdget_example("c-button-group-32")npx shadcn@latest add @reui/c-button-group-32Shadcn Components in Button Group Sort & View
Dependencies
- cn
About Shadcn Button Group Sort & View
Button group with dropdown menu and view toggle. Built by composing Button, Button Group, Dropdown Menu. Uses cn alongside the shadcn primitives. A free, open source shadcn button group example you can install with npx shadcn@latest add @reui/c-button-group-32 and edit as your own code.
What You Can Build With Shadcn Button Group Sort & View
- Composes Button, Button Group, Dropdown Menu, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-button-group-32
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Button Group Examples
- Two Buttons Basic button group with two buttons
- Button & Input Button group with button followed by input
- Buttons & Badge Button group with buttons and badge
- Dropdown Menu Button group with dropdown menu
- Team Activity Team activity and collaboration group
- Icon Actions Button group using icons for visual actions
- Status Indicator Dropdown menu with status indicator
- Like Counter Button group styled as a like button with a counter
- Nested Groups Nested button groups for complex action sets
- Basic Pagination Button group used for standard pagination
- Split Pagination Pagination split into page numbers and navigation arrows
- Text Alignment Button group for editor text alignment controls
Related Shadcn Component Categories
Open-source shadcn calendar components for date picking, scheduling flows, and booking interfaces.
Open-source shadcn card components for content previews, dashboard widgets, and product summaries.
Open-source shadcn carousel components for image galleries, feature showcases, and testimonials.
Nested multi-level selection with drill-down navigation, breadcrumbs, search and custom rows.
Open-source shadcn chart components for analytics dashboards, KPI tracking, and reports.
Open-source shadcn checkbox components for multi-select forms, settings preferences, and table selection.
Frequently Asked Questions
When should I use Shadcn Button Group Sort & View?
Use it for a sort icon menu, a grid or list pair and a filled Add New menu in one row, with only the view pair joined.
Shadcn Button Group as a whole fits:
- Toolbars of related actions joined into one strip, such as editor, media, zoom or export controls
- Split buttons that pair a main action with a chevron menu of its variants, such as Save or Publish
- Segmented pickers and filter bars that join buttons to selects, inputs, counters and status text
For a 2 way view choice whose pressed option must reach screen readers, use the Toggle Group component. For a text field with an icon, prefix or action drawn inside its own border, use the Input Group component. For a single standalone action, or actions spaced apart with no shared border, use the Button component.
How do I install Shadcn Button Group Sort & View?
Is Shadcn Button Group Sort & View free to use?
Which components does Shadcn Button Group Sort & View use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.