A segmented button is a group of buttons that can be toggled. The group appears as one large button with multiple segments.

Segmented buttons – live examples

When to Use

Use the segmented button:

• To let users choose from a small group of options, such as “Year, Month, Day” or “Small, Medium, Large”.

Don’t use the segmented button:

• If there are too many options. Consider using a split button or radio button group instead.
• If multiple options can be active at once. Consider using a checkbox group instead.

Anatomy

1. Background: Different background colors visualize the state of the button and indicate the interactive areas (segments).
2. Text / Icon: Describes or visualizes the action that is triggered for each interactive segment.

Variants

Two variants are available for the segmented button:

• Text only
• Icon only

Segmented button variants – live examples
(from top to bottom: text only, icon only)

Behavior and Interaction

When the user clicks one of the options, this option becomes active (pressed). All other options remain or become inactive (not pressed).

Segmented button behavior – live examples

Related Links