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.

<QtmSplitButton icon="reply" label="Reply"></QtmSplitButton>

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: 'reply',
    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,
  },
];

<QtmSplitButton icon="reply" label="Reply" options={options}></QtmSplitButton>

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

<QtmSplitButton
  visible
  icon="reply"
  label="Reply"
  options={options}
  size="small"
></QtmSplitButton>
<QtmSplitButton
  visible
  icon="reply"
  label="Reply"
  options={options}
  size="medium"
></QtmSplitButton>
<QtmSplitButton
  visible
  icon="reply"
  label="Reply"
  options={options}
  size="large"
></QtmSplitButton>

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'

<QtmSplitButton
  visible
  icon="reply"
  label="Reply"
  options={options}
  placement="top-center"
></QtmSplitButton>

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

<QtmSplitButton
  icon="reply"
  label="Reply"
  options={options}
  variant="filled-primary"
></QtmSplitButton>
<QtmSplitButton
  icon="reply"
  label="Reply"
  options={options}
  variant="ghost-neutral"
></QtmSplitButton>
<QtmSplitButton
  icon="reply"
  label="Reply"
  options={options}
  variant="ghost-primary"
></QtmSplitButton>

Disabled

Filled primary

Ghost neutral

Ghost primary

<QtmSplitButton
  disabled
  icon="reply"
  label="Reply"
  options={options}
  variant="filled-primary"
></QtmSplitButton>
...

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.

<QtmSplitButton
  scrollable
  nbVisibleOptions={2}
  visible
  icon="reply"
  label="Reply"
  options={options}
></QtmSplitButton>

API

Loading API documentation...