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​
| Description | Defines whether the component is disabled. A disabled component can't be selected or focused, and it is not in the tab chain. |
| Type | boolean |
| Default | false |
selected​
| Description | Determines whether the component is displayed as selected. |
| Type | boolean |
| Default | false |
| Description | Defines the tooltip of the component.
Note: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.2.0 |
accessibleName​
| Description | Defines the accessible ARIA name of the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.0.0-rc.15 |
accessibleNameRef​
| Description | Receives id(or many ids) of the elements that label the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.1.0 |
| Description | Defines 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. |
| Type | string | undefined |
| Default | undefined |
default​
| Description | Defines 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. |
| Type | Array<Node> |
No events available for this component.
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.