This is a beta release of the Quantum web libraries

Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.

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

<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>

API

The SplitButton component accepts all the props defined in the Dropdown interface.

However, SplitButton doesn't accept any children.

Loading API documentation...

Spotted a bug, have a question, or want to suggest a new feature?

Submit an issue on GitLab

Label and icon​

Options​

Sizes​

Placement​

Color variations​

Disabled​

Scrolling​

API​