SplitButton
SplitButton groups a set of commands in an overlay with a default action item.
SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
Usage #
Examples #
Basic #
SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
Icons #
The buttons and menuitems have support to display icons.
Nested #
SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
Severity #
The severity property defines the type of button.
Disabled #
When the disabled attribute is present, the element is uneditable and unfocused. Additionally, the disabled states of the button and menu button can be handled independently. The button is disabled when buttonDisabled is present, and the menu button is disabled when menuButtonDisabled is present.
Raised #
Raised buttons display a shadow to indicate elevation.
Rounded #
Rounded buttons have a circular border radius.
Text #
Text buttons are displayed as textual elements.
Raised Text #
Text buttons can be displayed as raised as well for elevation.
Outlined #
Outlined buttons display a border without a background initially.
Sizes #
SplitButton provides small and large sizes as alternatives to the standard.
Template #
SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
Accessibility #
Screen Reader
SplitButton component renders two native button elements, main button uses the label property to define aria-label by default which can be customized with buttonProps. Dropdown button requires an explicit definition to describe it using menuButtonProps option and also includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button.
The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the dropdown button.
Main Button Keyboard Support
| Key | Function |
|---|---|
| enter | Activates the button. |
| space | Activates the button. |
Menu Button Keyboard Support
| Key | Function |
|---|---|
| enter | Toggles the visibility of the menu. |
| space | Toggles the visibility of the menu. |
| down arrow | Opens the menu and moves focus to the first item. |
| up arrow | Opens the menu and moves focus to the last item. |
Menu Keyboard Support
| Key | Function |
|---|---|
| enter | Actives the menuitem, closes the menu and sets focus on the menu button. |
| escape | Closes the menu and sets focus on the menu button. |
| down arrow | Moves focus to the next item, if it is the last one then first item receives the focus. |
| up arrow | Moves focus to the previous item, if it is the first one then last item receives the focus. |
| home | Moves focus to the first item. |
| end | Moves focus to the last item. |
