Actions · §5.6

Toggle and button group

Pressed states and joined buttons for staff toolbars.

Theme
Contrast
Language
Motion
Text size

Code

<ToggleGroup value={view} onValueChange={setView}><ToggleGroupItem value="board">Board</ToggleGroupItem></ToggleGroup>

Accessibility

  • Toggles expose aria-pressed; groups are one tab stop with arrow keys.

Usage

Do

  • Use a segmented control for 2–4 views of the same data.

Don't

  • Don't use toggles for settings that save.

Platforms

Web
apps/web/components/ui/toggle.tsx, apps/web/components/ui/toggle-group.tsx, apps/web/components/ui/button-group.tsx
iOS
SwiftUI Toggle(.button)
Android
Compose FilterChip / SegmentedButton