revido kit
Start building
← All components
navigation / beta

SortMenu

Order a list by a field and direction; the button shows the applied sort and offers Reset to default.

LIVE PREVIEW
Loading preview…

When to use

  • Ordering lists and boards from a view toolbar, next to FilterButton.

Consider an alternative

  • List pages with a Display control — ordering lives in DisplayOptions (one control for layout, grouping and ordering).
  • Column-header sorting in a data table — the table owns it.

Import

import { SortMenu } from '@revido-llc/kit';

Keyboard interaction

  • Enter / Space — open
  • Arrow keys + Enter — choose field or direction
  • Escape — close

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

defaultValue (required)SortValue—The view's default order: the button shows the sort only when it differs, and "Reset" returns here.
onChange (required)(next: SortValue) => void—
options (required)readonly SortOption[]—
value (required)SortValue—
classNamestring—
labelstring"Sort"

Examples

Default vs applied

A quiet “Sort” on the default order; “Priority ↓” in cobalt once changed.

<SortMenu options={options} value={sort} defaultValue={DEFAULT_SORT} onChange={setSort} />

In the view toolbar

Change the order and watch the list and the button follow.

<Toolbar aria-label="View controls">
  <FilterButton … />
  <SortMenu … />
</Toolbar>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<SortMenu options={[{ id: "name", label: "Name" }]} value={{ field: "name", direction: "asc" }} defaultValue={{ field: "name", direction: "asc" }} />

Related components