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

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
icon	string		google material icon name
label	string		Label of the action button
nbVisibleOptions	number	5	the number of visible options when the dropdown overlay is scrollable
options	SplitButtonOption[]	[]	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
scrollable	boolean	false	if 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
visible	boolean	false	If true, the dropdown overlay is opened

Event	Type	Description
actionButton	CustomEvent<void>	Callback fired when an action button clicked. function(event: object) => void
valueChanged	CustomEvent<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)