Components

Button variants use primary, gray, outline, ghost, destructive, and outline-destructive tokens.

Button groups use primary, gray, outline, ghost, destructive, and outline-destructive tokens.

Links that do not fit the row collapse into a more menu. The active item stays on the row when it still fits, and the more control shows the active style when that item is in the menu.

Actions that do not fit the row collapse into a more menu. Delete stays on the row when it still fits.

Outline actions stay one fused group. Actions that do not fit collapse into the last More segment.

Icon-button style two-state control. Pressed fills primary (primary variant inverts to muted). Not Switch or ButtonGroup.

Read-only completion. ProgressRoot + ProgressTrack + ProgressIndicator. value={null} for indeterminate. Track size xs | sm | md; variant bar (default) or segments.

Variants use primary, muted, destructive, success, warning, and info tokens. Soft fill by default; type outline uses a neutral border like Button, with full semantic text, icon, and dot color. Leading icons via icon, check, or dot.

Profile photo with initials fallback. size is sm, md, or lg. Optional border. AvatarGroup stacks faces; max defaults to 4.

Wizard progress. Horizontal or vertical. Linear by default (cannot skip ahead). value="" / undefined leaves no step current; value={null} marks every step completed.

Independent onboarding tasks. value is completed ids (any order). size md (default) or sm. Item error / progress show cancel or CircleHalf (In Progress) icons with semantic title colors. Click indicator or title to toggle; description is not clickable.

Inline page banner. size is md (default) or lg. Variants use info, success, warning, and destructive tokens.

Keycaps for shortcuts. size is sm or md. Group combos with KbdGroup. Keys invert inside TooltipPopup.