Split Button
Split Buttons are dual-function menu buttons with two components: a label and an arrow; clicking on the label selects a default action, and clicking on the arrow opens up a list of other possible actions: the alternatives.
Label and icon
You can set label and icon for the action button by using label and icon attributes.
<SplitButton icon="reply" label="Reply"></SplitButton>
Options
Option list in dropdown overlay can be passed through the options property. An options in this list must be have value, label properties and/or icon, disabled properties.
const options = [
{
value: 'reply-all',
icon: 'replay',
label: 'Reply all',
},
{
value: 'forward',
icon: 'forward',
label: 'Forward',
},
{
value: 'reply-delete',
icon: 'reply',
label: 'Reply & Delete',
},
{
value: 'forward-delete',
icon: 'forward',
label: 'Forward & Delete',
},
{
value: 'delete',
icon: 'delete',
label: 'Delete',
disabled: true,
},
];
<SplitButton icon="reply" label="Reply" options="{options}"></SplitButton>
Sizes
Split buttons are available in three sizes to cater for the diverse range of use cases and devices that our business uses.
By default menu and buttons in split button are medium.
Small
Medium
Large
<SplitButton
visible
icon="reply"
label="Reply"
options="{options}"
size="small"
></SplitButton>
<SplitButton
visible
icon="reply"
label="Reply"
options="{options}"
size="medium"
></SplitButton>
<SplitButton
visible
icon="reply"
label="Reply"
options="{options}"
size="large"
></SplitButton>
Placement
You can set placement attribute to 'bottom-left', 'bottom-center', 'bottom-right', 'top-left', 'top-center' or 'top-right' to place the dropdown overlay. By default, the dropdown overlay is 'bottom-right'
<SplitButton
visible
icon="reply"
label="Reply"
options="{options}"
placement="top-center"
></SplitButton>
Color variations
Buttons in split button can be Filled primary, Ghost neutral or Ghost primary. By default, they are filled primary.
Filled primary
Ghost neutral
Ghost primary
<SplitButton
icon="reply"
label="Reply"
options="{options}"
variant="filled-primary"
></SplitButton>
<SplitButton
icon="reply"
label="Reply"
options="{options}"
variant="ghost-neutral"
></SplitButton>
<SplitButton
icon="reply"
label="Reply"
options="{options}"
variant="ghost-primary"
></SplitButton>
Disabled
Filled primary
Ghost neutral
Ghost primary
<SplitButton
disabled
icon="reply"
label="Reply"
options="{options}"
variant="filled-primary"
></SplitButton>
...
Scrolling
If not all menu items are displayed at once, menus can be scrollable by adding the scrollable attribute. If you want to change the number of visible items when the menu item list is scrollable, you can change value of nbVisibleOptions attribute.
<SplitButton
scrollable
nbVisibleOptions="{2}"
visible
icon="reply"
label="Reply"
options="{options}"
></SplitButton>