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 | undefinedDefault undefined Since 1.0.3
accessibleNameRef
Description Defines the IDs of the HTML Elements that label the component. Type string | undefinedDefault undefined Since 2.15.0
accessibleDescription
Description Defines the accessible description of the component. Type string | undefinedDefault undefined Since 2.15.0
accessibleDescriptionRef
Description Defines the IDs of the HTML Elements that describe the component. Type string | undefinedDefault undefined Since 2.15.0
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>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.