Back to Docs

Sort Control Patterns

Reusable UI primitives for ordering lists, tables, and grids with clear user intent.

Button Group

NewestOldestPopular

Segmented control for mutually exclusive sort keys. Active state uses brand violet fill.

Dropdown Trigger

Sort: Relevance

Compact dropdown for space-constrained toolbars. Chevron indicates expandable state.

Inline Tabs

A-ZZ-ARating

Underline indicator with pink accent. Works well above data tables or card grids.

Usage Guidelines

  • Always show the current sort direction with a visible indicator.
  • Default to the most useful order for the context — newest for feeds, relevance for search.
  • Keep sort controls near the content they affect, not buried in a settings panel.