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 |
accessibleDescription
| Description | Defines the accessible description of the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 2.15.0 |
accessibleDescriptionRef
| Description | Defines the IDs of the HTML Elements that describe the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 2.15.0 |
icon
| 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 |
Slots
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> |
Events
No events available for this component.
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.
CSS Custom States
No CSS custom states available for this component.