UI5 Web Components
Search

SegmentedButton

v1.0.0-rc.6
@ui5/webcomponents
<ui5-segmented-button>

Basic SegmentedButton

Map Satellite Terrain 
<ui5-segmented-button accessible-name="Geographic location">
    <ui5-segmented-button-item>Map</ui5-segmented-button-item>
    <ui5-segmented-button-item pressed>Satellite</ui5-segmented-button-item>
    <ui5-segmented-button-item>Terrain</ui5-segmented-button-item>
</ui5-segmented-button>

SegmentedButton with Icons

<ui5-segmented-button>
    <ui5-segmented-button-item icon="employee" pressed></ui5-segmented-button-item>
    <ui5-segmented-button-item icon="menu"></ui5-segmented-button-item>
    <ui5-segmented-button-item icon="factory"></ui5-segmented-button-item>
</ui5-segmented-button>

SegmentedButton with 5 SegmentedButtonItems

Item Pressed SegmentedButtonItem With Bigger Text Item SegmentedButtonItem Press me 
<ui5-segmented-button>
    <ui5-segmented-button-item>Item</ui5-segmented-button-item>
    <ui5-segmented-button-item pressed>Pressed SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
    <ui5-segmented-button-item>Item</ui5-segmented-button-item>
    <ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
    <ui5-segmented-button-item>Press me</ui5-segmented-button-item>
</ui5-segmented-button>

Overview

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.

Note: There can be just one selected item at a time.

ES6 Module Import

import "@ui5/webcomponents/dist/SegmentedButton";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
accessibleName
accessible-name
string
undefined
Defines the accessible ARIA name of the component.
since v1.0.3
selectedItem (readonly)
selected-item
ISegmentedButtonItem
Currently selected item.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the items of ui5-segmented-button.

Note: Multiple items are allowed.

Note: Use the ui5-segmented-button-item for the intended design.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
selection-change
Fired when the selected item changes.
selectedItem
type: HTMLElement
description: the pressed item.

SegmentedButtonItem

Overview

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";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
design
sap.ui.webc.main.types.ButtonDesign
"Default"
Note: The property is inherited and not supported. If set, it won't take any effect.
iconEnd
icon-end
boolean
false
Note: The property is inherited and not supported. If set, it won't take any effect.
submits
boolean
false
Note: The property is inherited and not supported. If set, it won't take any effect.
pressed
boolean
false
Determines whether the component is displayed as pressed.
accessibilityAttributes
object
An object of strings that defines several additional accessibility attribute values for customization depending on the use case. It supports the following fields:
  • expanded: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
    • true
    • false
  • hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:
    • Dialog
    • Grid
    • ListBox
    • Menu
    • Tree
  • controls: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.
since v1.2.0
accessibleName
accessible-name
string
undefined
Defines the accessible ARIA name of the component.
since v1.0.0-rc.15
accessibleNameRef
accessible-name-ref
string
""
Receives id(or many ids) of the elements that label the component.
since v1.1.0
disabled
boolean
false
Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
icon
string
""
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.
tooltip
string
""
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.
since v1.2.0

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
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.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
click
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.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel