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.