SegmentedButton

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

Basic SegmentedButton

Map Satellite Terrain
<ui5-segmented-button>
    <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
selectedItem (readonly)
selected-item
sap.ui.webcomponents.main.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
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.
accessibleName
accessible-name
String
Sets the accessible aria name of the component.
since v1.0.0-rc.15
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 to be displayed as graphical element within the component. The SAP-icons font provides numerous options.

Example: See all the available icons in the Icon Explorer.

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: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel