Skip to main content
🏠ComponentsSplit ButtonVersion: 2.0.0-beta.6

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.

<qtm-split-button icon="reply" label="Reply"></qtm-split-button>

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,
},
];
<qtm-split-button
icon="reply"
label="Reply"
options="options"
></qtm-split-button>

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
<qtm-split-button
options="options"
size="small"
visible
icon="reply"
label="Reply"
></qtm-split-button>
<qtm-split-button
options="options"
size="medium"
visible
icon="reply"
label="Reply"
></qtm-split-button>
<qtm-split-button
options="options"
size="large"
visible
icon="reply"
label="Reply"
></qtm-split-button>

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'

<qtm-split-button
options="options"
visible
icon="reply"
label="Reply"
placement="top-center"
></qtm-split-button>

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
<qtm-split-button
options="options"
variant="filled-primary"
visible
icon="reply"
label="Reply"
></qtm-split-button>
<qtm-split-button
options="options"
variant="ghost-neutral"
visible
icon="reply"
label="Reply"
></qtm-split-button>
<qtm-split-button
options="options"
variant="ghost-primary"
visible
icon="reply"
label="Reply"
></qtm-split-button>

Disabled

Filled primary
Ghost neutral
Ghost primary
<qtm-split-button
options="options"
variant="ghost-primary"
disabled
icon="reply"
label="Reply"
></qtm-split-button>
...

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 nb-visible-options attribute.

<qtm-split-button
nb-visible-options="2"
scrollable
options="options"
variant="ghost-primary"
visible
icon="reply"
label="Reply"
></qtm-split-button>

API

qtm-split-button

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabledbooleanfalseIf true, the component is disabled.
iconstringgoogle material icon name
labelstringLabel of the action button
nbVisibleOptionsnumber5the number of visible options when the dropdown overlay is scrollable
optionsSplitButtonOption[][]List of options in dropdown overlay, ex: [{icon:"face", value: "option1", label: "Option 1"},... ]
placement"bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right"'bottom-right'Placement of dropdown overlay
scrollablebooleanfalseif true, the dropdown overlay is scrollable
size"large" | "medium" | "small"'medium'The size of the split buttons
variant"filled-primary" | "ghost-neutral" | "ghost-primary"'filled-primary'The type of the buttons
visiblebooleanfalseIf true, the dropdown overlay is opened
EventTypeDescription
actionButtonCustomEvent<void>Callback fired when an action button clicked. function(event: object) => void
valueChangedCustomEvent<string>Callback fired when an option in dropdown overlay is clicked. function(event: object) => void You can pull out the selected options by accessing event.detail (object)