SegmentedButton

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

Basic SegmentedButton

Map Satellite Terrain
<ui5-segmentedbutton>
    <ui5-togglebutton>Map</ui5-togglebutton>
    <ui5-togglebutton pressed>Satellite</ui5-togglebutton>
    <ui5-togglebutton>Terrain</ui5-togglebutton>
</ui5-segmentedbutton>
	

SegmentedButton with Icons

<ui5-segmentedbutton>
    <ui5-togglebutton icon="employee" pressed></ui5-togglebutton>
    <ui5-togglebutton icon="menu"></ui5-togglebutton>
    <ui5-togglebutton icon="factory"></ui5-togglebutton>
</ui5-segmentedbutton>
	

SegmentedButton with 5 ToggleButtons

Button Pressed ToggleButton With Bigger Text Button Pressed ToggleButton Press me
<ui5-segmentedbutton>
    <ui5-togglebutton>Button</ui5-togglebutton>
    <ui5-togglebutton pressed>Pressed ToggleButton With Bigger Text</ui5-togglebutton>
    <ui5-togglebutton>Button</ui5-togglebutton>
    <ui5-togglebutton>ToggleButton</ui5-togglebutton>
    <ui5-togglebutton>Press me</ui5-togglebutton>
</ui5-segmentedbutton>
	

Overview

The ui5-segmentedbutton shows a group of buttons. When the user clicks or taps one of the buttons, it stays in a pressed state. It automatically resizes the buttons to fit proportionally within the component. When no width is set, the component uses the available width.

Note: There can be just one selected button 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
selectedButton (readonly)
selected-button
ui5-togglebutton
Currently selected button.

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 buttons of ui5-segmentedbutton.

Note: Multiple buttons are allowed.

Note: Use the ui5-togglebutton 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 button changes.
selectedButton
type: HTMLElement
description: the pressed button.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel