Skip to main content

SegmentedButtonItem

<ui5-segmented-button-item>

Users can use the ui5-segmented-button-item as part of a ui5-segmented-button.

Clicking or tapping on a ui5-segmented-button-item changes its state to selected. The item returns to its initial state when the user clicks or taps on it again. By applying additional custom CSS-styling classes, apps can give a different style to any ui5-segmented-button-item.

ES6 Module Import​

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

Properties​

disabled​

DescriptionDefines whether the component is disabled. A disabled component can't be selected or focused, and it is not in the tab chain.
Typeboolean
Defaultfalse

selected​

DescriptionDetermines whether the component is displayed as selected.
Typeboolean
Defaultfalse

tooltip​

DescriptionDefines the tooltip of the component.
Note: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
Typestring | undefined
Defaultundefined
Since1.2.0

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the component.
Typestring | undefined
Defaultundefined
Since1.1.0

icon​

DescriptionDefines the icon, displayed as graphical element within the component. The SAP-icons font provides numerous options.
Example: See all the available icons within the Icon Explorer.
Typestring | undefined
Defaultundefined

Slots​

default​

DescriptionDefines the text of the component.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
TypeArray<Node>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.