Skip to main content

SegmentedButton

<ui5-segmented-button> | Since 1.0.0-rc.6

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.

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

accessibleNameRef​

DescriptionDefines the IDs of the HTML Elements that label the component.
Typestring | undefined
Defaultundefined
Since2.15.0

accessibleDescription​

DescriptionDefines the accessible description of the component.
Typestring | undefined
Defaultundefined
Since2.15.0

accessibleDescriptionRef​

DescriptionDefines the IDs of the HTML Elements that describe the component.
Typestring | undefined
Defaultundefined
Since2.15.0

selectionMode​

DescriptionDefines the component selection mode.
Type"Single" | "Multiple"
Default"Single"
Since1.14.0

itemsFitContent​

DescriptionDetermines whether the segmented button items should be sized to fit their content.
If set to true, each item will be sized to fit its content, with any extra space distributed after the last item. If set to false (the default), all items will be equally sized to fill the available space.
Typeboolean
Defaultfalse
Since2.16.0

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>
ParametersselectedItems: Array<ISegmentedButtonItem>
an array of selected items. Since: 1.14.0
BubblesYes
CancelableNo

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.

Items Fit Content​

You can define a property that allows each item to be sized according to its content.