Inputs
Toggle button
A segmented control for switching between mutually exclusive views or modes.
Examples
Two and three segments (aria-pressed)
States
Rendered states (visual reference; the live example above is the accessible one) | Default | Hover | Focus visible | Pressed | Disabled |
|---|
| Segmented | | | | | |
|---|
Anatomy
Toggle button anatomy| # | Part | Description | Presence |
|---|
| 1 | Track | Glass (light) or solid (dark) base | Required |
|---|
| 2 | Segment | 2 to 4 buttons, each with aria-pressed | Required |
|---|
| 3 | Active indicator | Filled pill behind the active segment | Required |
|---|
Specifications
| Segments | 2, 3 or 4, with uniform inner padding |
|---|
| Surface | Frosted glass base on light, solid base on dark |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Tab | Moves into the group, then to the next control |
|---|
| Space Enter | Presses the focused segment |
|---|
| ← → | Optional: moves focus between segments |
|---|
Pointer and touch| Trigger | Response |
|---|
| Press | Indicator slides to the segment in 200ms ease-out |
|---|
| Hover | Overlay at 10% on inactive segments |
|---|
Accessibility
role · group of buttons
1.4.1Use of Colour2.1.1Keyboard4.1.2Name, Role, Value
Requirements| Requirement | How Rig meets it |
|---|
| Semantics | role="group" with an aria-label, each segment a button with aria-pressed. For a true single choice, use Radio button. |
|---|
| State | Active is shown by fill and weight, not colour alone |
|---|
| Reduced motion | The slide becomes an instant change |
|---|
Read the matching WAI pattern ↗
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Use for view modes such as List and Grid | ✕Do not use it to submit or navigate |
| ✓Keep labels to one word | ✕Do not use more than four segments |
Notes from the Figma file
- Use for view modes (list or grid). For on/off preferences use Switch.