AccentSwatches

The accent-family picker — five dots, each painted by the token it offers. No hex in the code.

When to use it

The user picks an accent family — in app settings or in the doc web's top bar.
The choice should be shown as a colour, not a name. “Emerald” tells nobody how the screen will look.

The options are named things that are not colours. That is IngotSegmented or IngotSelect.
The point is to show HOW a family looks across tokens. That is the palette demo in the Basics guide, not a picker.

value: AccentChoice — The selected family.
onChange: (choice: AccentChoice) => void — The choice is handed out — the component neither remembers nor stores it.
groupLabel: string — Names the group for a screen reader (“Accent”). Required: an unnamed group reads as five unnamed choices.
optionLabel: (choice: AccentChoice) => string — The name of one family. A function, not a dictionary — the caller owns the copy, the kit does not.
disabled: boolean — Locks the choice until the previous one is saved.
className: string — A pass-through class — the bar sets margins and alignment, the primitive the look.