Updated: July 16, 2024

Segmented Button

ui5-segmented-button | v1.0

Intro

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

Do

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

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.
Anatomy of a segmented button
Anatomy of a segmented button

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

Implementation