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 pressed.
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​
| Description | Note: The property is inherited and not supported. If set, it won't take any effect. |
| Type | "Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention" |
| Default | "Default" |
iconEnd​
| Description | Note: The property is inherited and not supported. If set, it won't take any effect. |
| Type | boolean |
| Default | false |
submits​
| Description | Note: The property is inherited and not supported. If set, it won't take any effect. |
| Type | boolean |
| Default | false |
| Deprecated | Set the "type" property to "Submit" to achieve the same result. The "submits" property is ignored if "type" is set to any value other than "Button". |
accessibilityAttributes​
| Description | Note: The property is inherited and not supported. If set, it won't take any effect. |
| Type | AccessibilityAttributes |
| Default | |
| Description | Note: The property is inherited and not supported. If set, it won't take any effect. |
| Type | "Button" | "Submit" | "Reset" |
| Default | "Button" |
accessibleRole​
| Description | Note: The property is inherited and not supported. If set, it won't take any effect. |
| Type | "Button" | "Link" |
| Default | "Button" |
pressed​
| Description | Determines whether the component is displayed as pressed. |
| Type | boolean |
| Default | false |
disabled​
| Description | Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain. |
| Type | boolean |
| Default | false |
| 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 |
| Default | "" |
| 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 |
| Default | "" |
| 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 |
| Default | "" |
| Since | 1.1.0 |
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> |
| Description | Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
Note: The event will not be fired if the disabled property is set to true. |
| Type | Event |
Methods​
No methods available for this component.
CSS Parts​
| Name | Description |
|---|
| button | Used to style the native button element |