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

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

Options​

Option list in dropdown overlay can be passed through the options property. An option in this list must 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} />

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
  visible
  icon="reply"
  label="Reply"
  options={options}
  size="medium"
/>
<SplitButton
  visible
  icon="reply"
  label="Reply"
  options={options}
  size="large"
/>

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

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
  icon="reply"
  label="Reply"
  options={options}
  variant="ghost-neutral"
/>
<SplitButton
  icon="reply"
  label="Reply"
  options={options}
  variant="ghost-primary"
/>

Disabled​

Filled primary

Ghost neutral

Ghost primary

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

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

Event handling​

The SplitButton component provides two main event handlers:

onActionButton​

Triggered when the main action button (left side) is clicked. This is typically used to execute the default action.

const handleActionButton = () => {
  console.log('Action button clicked');
  // Execute default action here
  sendReply();
};

<SplitButton
  icon="reply"
  label="Reply"
  options={options}
  onActionButton={handleActionButton}
/>

onValueChanged​

Triggered when an option is selected from the dropdown menu. The callback receives the value of the selected option as a parameter.

const handleOptionSelected = (value) => {
  console.log(`Option selected: ${value}`);
  
  // Handle different actions based on the selected option
  switch(value) {
    case 'reply-all':
      replyToAll();
      break;
    case 'forward':
      forwardMessage();
      break;
    // Handle other options
  }
};

<SplitButton
  icon="reply"
  label="Reply"
  options={options}
  onValueChanged={handleOptionSelected}
/>

You can use both event handlers together to create a fully interactive split button:

<SplitButton
  icon="reply"
  label="Reply"
  options={options}
  onActionButton={handleActionButton}
  onValueChanged={handleOptionSelected}
/>

Custom Classes​

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

<SplitButton 
  classes="w-64" 
  icon="reply" 
  label="Reply" 
  options={options} 
/>

API​

QtmSplitButton

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
onActionButtonCustomEvent<void>Callback fired when an action button clicked. function(event: object) => void
onValueChangedCustomEvent<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)