Split Button A split button groups multiple related actions.
A split button is a way of grouping related actions. One action will be visible by default; the others will be hidden within a dropdown menu.
Table of contents
Usage guidelines
When to use
- Use a split button when there are multiple, related, branching actions of equal hierarchy. These actions should be of equal hierarchical weight. For instance, the "New story" split button in the editor's dashboard controls which story type will be created; the default story type isn't more important than the mapstack story type, just more common.
- Like the primary variant of buttons which they resemble, split buttons should be used sparingly, to either begin or end an entire workflow.
How to use
- Carefully consider which action should be featured most prominently as the default action.
- As the editor's "New story" split button does, you could use the
activeto programmatically change what appears as the default action based on certain conditions, such as whether that action was the last one selected.
Attributes
An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.
<res-component booleanAttribute stringAttribute="parameter">
<child-element></child-element>
</res-component>| Attribute | Type | Description |
|---|---|---|
icon | string | Name of res-icon to render within button (and as mobile button) |
mobile | boolean | Sets whether mobile styles are used |
disabled | boolean | Set initial state to disabled |
active | boolean | Placed on the li you'd like to be the main action (otherwise defaults to the first 'li') |
Notes
Depends on:Required DOM
Without these, the component will throw an error on render.
<ul|ol>- List of links
History
| Version | Note |
|---|---|
| 0.25.0 | Use the original active target node to preserve click events. |
| 0.16.1 | Prevent res-split-button instances from rendering twice. |
| 0.12.0 | Apply new spacing scale. Change res-icon size names from medium to large. New name, same size. |
| 0.11.10 | Add additional positioning calculation on toggle to prevent misalignment. |
| 0.11.0 | Tweaks to accommodate new icon set. |
| 0.10.1 | Make tap target larger on mobile design |
| 0.10.0 | Color update, and added transparent border between action and toggle |
| 0.9.0 | Design tweak to flatten the corners of the dropdown |
| 0.7.4 | Add disabled state |
| 0.7.2 | Initial build to spec. |