SplitButton
SplitButton groups a set of commands in an overlay with a default command.
#
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 variant of a button.
Disabled #
When the disabled attribute is present, the element is uneditable and unfocused.
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 #
Custom content inside a button is defined as children.
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 |
|---|---|
| enterspacedown arrowup arrow | Opens the menu and moves focus to the first item. |
Menu Keyboard Support
| Key | Function |
|---|---|
| enter | If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays. |
| space | If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays. |
| escape | If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. |
| down arrow | Moves focus to the next menuitem within the submenu. |
| up arrow | Moves focus to the previous menuitem within the submenu. |
| alt + up arrow | Closes the popup, then moves focus to the target element. |
| right arrow | In nested mode if option is closed, opens the option otherwise moves focus to the first child option. |
| left arrow | In nested mode if option is open, closes the option otherwise moves focus to the parent option. |
| home | Moves focus to the first menuitem within the submenu. |
| end | Moves focus to the last menuitem within the submenu. |
| any printable character | Moves focus to the menuitem whose label starts with the characters being typed. |