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

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	1.0.3

selectionMode

Description	Defines the component selection mode.
Type	"Single" | "Multiple"
Default	"Single"
Since	1.14.0

selectedItems

Description	Returns an array of the currently selected items.
Type	Array<ISegmentedButtonItem>
Default	[]
Readonly	true
Since	1.14.0

Slots

default

Description	Defines the items of ui5-segmented-button. Note: Multiple items are allowed. Note: Use the ui5-segmented-button-item for the intended design.
Type	Array<ISegmentedButtonItem>

Events

selection-change

Description	Fired when the selected item changes.
Type	CustomEvent<SegmentedButtonSelectionChangeEventDetail>
Parameters	selectedItems: Array<ISegmentedButtonItem> an array of selected items. Since: 1.14.0
Bubbles	Yes
Cancelable	No

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.