SplitButton
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 anicon
, 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
orEnter
- triggers the default action -
Shift
orEscape
- ifSpace
is pressed, releases the default action button without triggering the click event. -
Arrow Down
,Arrow Up
,Alt
+Arrow Down
,Alt
+Arrow Up
, orF4
- triggers the arrow action There are separate events that are fired on activating ofui5-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";
Basic Sample​
Properties​
icon​
activeIcon​
activeArrowButton​
design​
disabled​
accessibleName​
Slots​
default​
Events​
click​
arrow-click​
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.
More Samples​
Design​
The SplitButton supports several designs to indicate the priority or the nature of the action.
Opening Menu​
The main use-case of SplitButton is to open an menu by clicking the arrow.