Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Interactive

Sort Controls Button Group for React

Sort controls with a field picker and a direction toggle, and a row where the sorted field shows its arrow.

Framework
UI library

Sorting for a list or a product grid. The first group picks Name, Date or Size and ends with an arrow button that flips the direction. The second group puts the arrow inside the sorted field's button, the way product listings often show it.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What is tracked?

Two values: the field, starting at name, and the direction, asc or desc, starting at asc. Every field button stores its own value as the field.

How does the direction button work?

It flips between ascending and descending and shows an up or down arrow. Its aria-label says Sort ascending or Sort descending, so the icon-only button has a name.

How does the second row show the direction?

The selected field's button adds an arrow after its label. The other buttons show no arrow. The direction itself only changes from the first row's arrow button.

Do the two rows share the field?

Yes. Picking Price clears Name. Use separate values if both rows should stay set.

How is the sorted field shown?

Its button uses variant="default" and aria-pressed. The rest use outline.

Does the demo sort anything?

No. Sort your rows by the field and direction where you render them.

All 39 button group examples