This guideline now covers both SAPUI5 and SAP Web Components. Learn more.
Information
Icon
false

Intro

A segmented button is a group of connected buttons that users can select. The group appears as a single component divided into multiple segments.

Segmented button with four options: New, In Progress, Completed, and On Hold, with In Progress selected.

Segmented button

Component availability

This component is available in the following libraries:

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.SegmentedButton">sap.m.SegmentedButton</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2FSegmentedButton%2F">ui5-segmented-button</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fdesign%2FSILcWzK5uFghKun9jx6D7c%2FSAP-Web-UI-Kit%3Fnode-id%3D100495-10450%26t%3DLpIIvfuDWdfuZTIU-4">Segmented Button</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>
<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.SegmentedButton">sap.m.SegmentedButton</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2FSegmentedButton%2F">ui5-segmented-button</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Fiori for Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1494295794601744471">Segmented Button</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>

When to Use

2
do
false

Use the segmented button to:

  • Let users choose from a small set of related options, such as “Year, Month, Day” or “Small, Medium, Large”.
dont
false

Don’t use the segmented button to:

  • Use single selection mode when users should be able to select only one segment at a time.
  • Use multiple selection mode when users should be able to select any combination of segments (SAP Web Components only).
  • Start with no selection when appropriate.
  • For icon-only segmented buttons, add a tooltip to each segment with a clear label.

Anatomy

The segmented button component consists of the following elements:

  1. Background: Different background colors visualize the state of the segmented button and indicate the interactive areas (segments).
  2. Text or icon: Describes the action associated with each segment.

Anatomy of a segmented button (New, In Progress, Completed) with numbered pointers indicating background (1) and text (2); In Progress is selected.

Anatomy of a segmented button

Types

Display types

The segmented button supports three display types:

A: Text only
B: Icon only
C: Text and icon

Segmented button display types: text only A); icon only B), text and icon C).

Display types

Selection modes

There are two types of selection mode: single selection and multiple selection (SAP Web Components only).

A: Single selection: When the user clicks a segment, it becomes selected. All other segments are deselected. Only one segment is selected at a time.

B: Multiple selection :badge, info, medium, _, SAP Web Components: : When the user clicks a segment, it toggles between selected and unselected, without affecting the other segments. In multiple selection mode, the user can select any combination of buttons.

Examples of segmented button selection modes: A single selection with one button selected; B multiple selection with two buttons selected.

Selection modes

Note: The segmented button can be configured to start with no segments selected.

States

Component states

The segments of the segmented button each have one of two states: enabled or disabled.

A: Enabled: In this state, the segment is interactive, enabling the user to select it and trigger its associated action.

B: Disabled: In this state, the segment is not interactive and cannot be selected or triggered by the user.

The segmented button can simultaneously contain both enabled and disabled segments.

Segmented buttons showing enabled state (A) where all segments are interactive, and disabled state (B) where segments are grayed out and non-interactive.

Component states: enabled (A) and disabled (B)

For more information, see Component States.

Interaction states

Segmented buttons feature three interaction states – regular, hover, and down – each of which is paired with either an unselected or selected state.

Regular states

A: Regular unselected is the default, unselected state for a segment.

B: Regular selected is the state when the segment is selected.

Segmented buttons in regular unselected state (A) with no segments selected, and regular selected state (B) with the first segment selected (Button 1).

Regular states: unselected (A) and selected (B)

Hover states

A: Hover unselected is the state when the cursor of a pointing device (such as a mouse or pen) is currently placed on an unselected segment that is in an enabled state.

B: Hover selected is the state when the cursor of a pointing device (such as a mouse or pen) is currently placed on a selected segment that is in an enabled state.

Segmented buttons in hover unselected state (A), and hover selected state (B) where the first selected segment displays a highlighted border.

Hover states: unselected (A) and selected (B)

Down state

Down unselected is the state when currently pressing an unselected segment.

Segmented button in down unselected state, showing a segment being pressed.

Down unselected state

For more information, see Interaction States.

Focus state

The focus state determines which component receives input from the keyboard or another input device. Keyboard and assistive technology users rely on the focus state to follow the interaction.

The focus state is visualized by an additional border around the segment.

When interaction begins, focus is set on the active segment.

Segmented buttons with focus indicator on an unselected segment (A) and on a selected segment (B), highlighted with a border around the segment.

Focused unselected (A) and focused selected (B) states

For more information, see Focus States.

Behavior and Interaction

Mouse interaction

Single selection

On mouse down, the segment becomes active and receives focus.

A: The user starts pressing an unselected segment.
B: When the user releases while still on the segment, the segment is selected, its action is triggered, and the previously selected segment is deselected.

Three step sequence showing mouse interaction: default state, A) pressing a segment, B) final state with the pressed segment (Button 2) selected and others deselected.

Single selection interactions

Multiple selection :badge, info, large, _, SAP Web Components only:

A: The user starts pressing an unselected segment.
B: When the user releases while still on the segment, the segment is selected, its action is triggered, and the other segments remain unchanged.

Three step sequence showing mouse interaction for multiple selection: initial state, A) pressing a segment, B) final state with two segments selected.

Multiple selection interactions

Selection cancellation

If the user releases the mouse button outside the pressed segment, all segments remain in their current interaction state, and no action is triggered. This applies to both single selection and multiple selection.

Segmented button illustrating selection cancellation: Button 2 shows a focus state while the cursor is released outside the segment, and no selection change or action is triggered.

Focus appears without any action being triggered

Touch interaction

On touch devices, the behavior is similar to the mouse interaction, without the hover and focus states.

Tooltips

When designing icon-only segmented buttons, always pair them with a tooltip that labels each icon-only segment.

Icon-only segmented button with a tooltip displayed on hover, labeling the "Completed" icon.

Segmented button with tooltip – icon only

For more information, see Using Tooltips.

Responsiveness

By default, all segments share the same width, based on the longest text label. Alternatively, the component can be configured so that each individual segment adapts to the width of its text or icon.

Segmented button responsiveness example showing two variants: on the left, all segments (New, In Progress, Completed, On Hold) share equal width based on the longest label; on the right, each segment adapts to the width of its own text label.

Segmented button with different text lengths – default width and content fit

The segmented button supports cozy and compact content densities.

Segmented buttons in compact density (A) with smaller size text and cozy density (B) with larger size text.

Compact (A) and cozy (B) content densities

Accessibility

SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.

For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.

Keyboard navigation

The following key combinations are supported by the segmented button component.

<div> <div>Key Combination</div> <div>What it Does</div> </div> <div> <div><strong>Tab</strong></div> <div>Moves the focus to the applicable segment of the segmented button. If the focus is already there, the focus is moved to the next UI element.</div> </div> <div> <div><strong>Shift + Tab</strong></div> <div>Backward navigation.</div> </div> <div> <div><strong>Right Arrow</strong> or <strong>Down Arrow</strong></div> <div>Moves the focus to the next segment within the segmented button.</div> </div> <div> <div><strong>Left Arrow</strong> or <strong>Up Arrow</strong></div> <div>Moves the focus to the previous segment within the segmented button.</div> </div> <div> <div><strong>Page Up</strong> or <strong>Home</strong></div> <div>Moves the focus to the first segment within the segmented button.</div> </div> <div> <div><strong>Page Down</strong> or <strong>End</strong></div> <div>Moves the focus to the last segment within the segmented button.</div> </div> <div> <div><strong>Spacebar</strong> or <strong>Enter/Return</strong></div> <div>Selects the focused segment.</div> </div>

Screen reader support

For additional details on screen reader support and Accessible Rich Internet Applications (ARIA), see UI5 Screen Reader Support and WAI-ARIA Authoring.

Content

Localization

The segmented button supports left-to-right (LTR) and right-to-left (RTL) reading directions.

Side-by-side comparison of segmented buttons in left-to-right layout, including versions with text and icons.

Segmented button – left-to-right

Side-by-side comparison of segmented buttons in right-to-left layout, including versions with text and icons.

Segmented button – right-to-left

Framework Comparison

The table below summarizes the differences between SAPUI5 and SAP Web Components and lists the framework-specific patterns.

<div> <div data-valign="middle">Feature</div> <div data-valign="middle">SAPUI5</div> <div data-valign="middle">SAP Web Components</div> </div> <div> <div data-valign="middle"> <p>Multiple selection mode</p> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fsegmented-button%2F%23selection-modes">Types – Selection Modes</a> and <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fsegmented-button%2F%23multiple-selection-badge-info-large-_-sap-web-components-only">Mouse Interaction – Multiple Selection</a>.</p> </div> <div data-valign="middle">Not аvailable</div> <div data-valign="middle">Available</div> </div>

[internal_only]To request this feature for SAP Web Components, please submit an InnerSource request.[/internal_only]

Guidelines

Components
Button

Implementation

SAPUI5
Segmented Button (samples)
Segmented Button (API reference)

UI5 Web Components
Segmented Button

Specifications

Segmented Button (visual design)

SAP Web UI Kit

Segmented Button (Figma)

Guidelines

Components
Button

Implementation

SAPUI5
Segmented button (samples)
Segmented Button (API reference)

UI5 Web Components
Segmented Button

UI Kit (Figma)

SAP Fiori for Web UI Kit / Segmented Button