UI5 Web Components
Search

SplitButton

v1.1.0
@ui5/webcomponents
<ui5-split-button>

Default SplitButton

Default Default 
<ui5-split-button>Default</ui5-split-button>
<ui5-split-button disabled>Default</ui5-split-button>

SplitButton with Design

Default Emphasized Positive Negative Attention Transparent 
<ui5-split-button design="Default">Default</ui5-split-button>
<ui5-split-button design="Emphasized">Emphasized</ui5-split-button>
<ui5-split-button design="Positive">Positive</ui5-split-button>
<ui5-split-button design="Negative">Negative</ui5-split-button>
<ui5-split-button design="Attention">Attention</ui5-split-button>
<ui5-split-button design="Transparent">Transparent</ui5-split-button>

SplitButton with Icons

Icon Icon + Active Icon 
<ui5-split-button icon="add">Icon</ui5-split-button>
<ui5-split-button icon="add" active-icon="accept">Icon + Active Icon</ui5-split-button>

Overview

ui5-split-button enables users to trigger actions. It is constructed of two separate actions - default action and arrow action that can be activated by clicking or tapping, or by pressing certain keyboard keys - Space or Enter for default action, and Arrow Down or Arrow Up for arrow action.

Usage

ui5-split-button consists two separate buttons:
  • for the first one (default action) you can define some text or an icon, or both. Also, it is possible to define different icon for active state of this button - activeIcon.
  • the second one (arrow action) contains only slim-arrow-down icon.
You can choose a design from a set of predefined types (the same as for ui5-button) that offer different styling to correspond to the triggered action. Both text and arrow actions have the same design.

You can set the ui5-split-button as enabled or disabled. Both parts of an enabled ui5-split-button can be pressed by clicking or tapping it, or by certain keys, which changes the style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled ui5-split-button appears inactive and any of the two buttons cannot be pressed.

Keyboard Handling

  • Space or Enter - triggers the default action
  • Shift or Escape - if Space is pressed, releases the default action button without triggering the click event.
  • Arrow Down, Arrow Up, Alt+Arrow Down, Alt+Arrow Up, or F4 - triggers the arrow action
    • There are separate events that are fired on activating of ui5-split-button parts:
    • click for the first button (default action)
    • arrow-click for the second button (arrow action)

ES6 Module Import

import "@ui5/webcomponents/dist/SplitButton.js";

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
Defines the accessible ARIA name of the component.
activeIcon
active-icon
string
""
Defines the icon to be displayed in active state as graphical element within the component.
design
ButtonDesign
"Default"
Defines the component design.

The available values are:
  • Default
  • Emphasized
  • Positive
  • Negative
  • Transparent
  • Attention
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
arrow-click
Fired when the user clicks on the arrow action.
click
Fired when the user clicks on the default action.
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