Skip to main content

SegmentedButton

The ui5-segmented-button shows a group of items. When the user clicks or taps one of the items, it stays in a pressed state. It automatically resizes the items to fit proportionally within the component. When no width is set, the component uses the available width.

Note: There can be just one selected item at a time.

ES6 Module Import​

import "@ui5/webcomponents/dist/SegmentedButton.js";

Basic Sample​

Properties​

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.0.3

mode​

DescriptionDefines the component selection mode.
Type"SingleSelect" | "MultiSelect"
Default"SingleSelect"
Since1.14.0

selectedItem​

DescriptionCurrently selected item.
TypeISegmentedButtonItem | undefined
Defaultundefined
Readonlytrue
Deprecatedsince 1.14.0. This method will be removed in the next major release. Please use the selectedItems property instead.

selectedItems​

DescriptionReturns an array of the currently selected items.
TypeArray<ISegmentedButtonItem>
Default[]
Readonlytrue
Since1.14.0

Slots​

default​

DescriptionDefines the items of ui5-segmented-button.
Note: Multiple items are allowed.
Note: Use the ui5-segmented-button-item for the intended design.
TypeArray<ISegmentedButtonItem>

Events​

selection-change​

DescriptionFired when the selected item changes.
TypeCustomEvent<SegmentedButtonSelectionChangeEventDetail>
ParametersselectedItem: ISegmentedButtonItem
the pressed item.
Deprecated: deprecated since 1.14.0 and will be removed in the next major release, use the selectedItems parameter instead.
selectedItems: Array<ISegmentedButtonItem>
an array of selected items.
Since:1.14.0

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Selection Modes​

You can define if single or multiple buttons can be pressed.