ExperimentalatomData

ColumnSortButton

A table column header that sorts its rows.

import { … } from "@brdgapp/ui/components/column-sort-button"

Usage

ColumnSortButton is a table column header you click to sort by that column. It shows the column's icon and name, with a faint double arrow when it isn't the sort and a blue arrow pointing the current way when it is. It only shows the state: the code that owns the rows decides what each click does.

When to use

As a DataTable column's header, for columns people compare: dates, counts, ratings.

When not to use

For a column that filters. Use ColumnFilterMenu instead.
For sorting a whole list from a toolbar. Use a menu.

Anatomy

Icon. The column's icon, 14px, muted.
Label. 12px Bold.
Arrow. ⇅ faint when not sorted; ↓ or ↑ in blue when sorted.

Examples

Two sortable headers

Click to sort; click again to flip.

States

	Rest	Hover	Focus
Not the sort
Sorted, newest first
Sorted, oldest first

State	What happens
Not the sort	Secondary label, faint double arrow.
Sorted	Dark label, blue arrow in the current direction.
Hover	Light fill.

Behavior

Built on Base UI Button, like Button: a real button with keyboard and focus handled.
The click doesn't reach a clickable row or table behind it.
A common pattern: first click sorts newest or best first; the next click flips it.

Do and don't

Describe directions in words: "newest first".

Don't

Leave screen readers with "ascending".

Content

The label is the column name: one or two words, sentence case.
describe uses plain words people would say: "newest first", "highest first", never "ascending".

Accessibility

Its name includes the state: "Sort by made, sorted newest first". Pass describe to get it.

Keys	Action
`EnterSpace`	Sort by this column, or flip the direction.

API reference