Toggle

Anatomy

A Toggle is a group of two or more fused buttons sharing a common border. The selected option renders with the primary (filled purple) style; all other options render with the secondary (outlined) style. The outer corners of the first and last button follow the platform-level shape setting (square or pill); all inner edges are squared to create the fused appearance.

Each option can carry an optional leading icon and a text label, or a text label alone.

Variants

Selected

The active option uses the primary button style: filled purple background, white text/icon. This gives it high visual prominence within the group.

Unselected

Inactive options use the secondary filled button style: white/light background, purple text/icon with a purple border. This keeps them visually present but clearly subordinate to the selected item.

Configurations

1. Number of options

Toggle supports 2 or more options. Keep the count to 4 or fewer to avoid overcrowding. For larger option sets, use Select or RadioButtonGroup instead.

2. Icon + label / label only

Each option can include a leading icon alongside its label. All options in a group should follow the same pattern — either all with icons or all without.

3. Size

Toggle inherits Button's three sizes: large, medium, and small. Choose the size based on the surrounding layout context.

4. Shape

Like Button, Toggle respects the platform-level shape setting: square (default) or pill. The shape applies only to the outer corners of the first and last option.

5. Fitting

In content-fit mode each option is sized to its content. In layout-fit mode the options share the container width equally.

States

Each option inherits Button's full state set: default, hover, focused, active (pressed), and disabled. The entire Toggle can be disabled via the isDisabled prop, or individual options can be disabled via their own isDisabled field.