Split Button

This component is composed of other TDS elements (Button, Dropdown and Menu) and therefore we recommend you refer to the documentation of those components to ensure that you use the component in the most appropriate way.

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

<!---Small-->
<div class="qtm-dropdown qtm-split-button qtm-visible">
  <div class="qtm-button-group">
    <button class="qtm-button-action qtm-button qtm-filled qtm-primary qtm-medium">
      <i class="material-icons qtm-icon">reply</i>
      <span>Reply</span>
    </button>
    <div class="qtm-dropdown-trigger">
      <button
        class="qtm-button-trigger qtm-button qtm-filled qtm-primary qtm-medium"
      >
        <i class="material-icons qtm-icon">expand_more</i>
      </button>
    </div>
  </div>
  <div class="qtm-dropdown-overlay">
    <ul class="qtm-menu-item-list qtm-medium">
      <li class="qtm-menu-item">
        <span class="qtm-menu-item-label">
          <i class="material-icons qtm-icon">reply</i>
          <span>Reply All</span>
        </span>
      </li>
      ....
      <li class="qtm-menu-item qtm-disabled">
        <span class="qtm-menu-item-label">
          <i class="material-icons qtm-icon">delete</i>
          <span>Delete</span>
        </span>
      </li>
    </ul>
  </div>
</div>

<!---Medium-->
<div class="qtm-dropdown qtm-split-button qtm-visible">
  ...
  <button class="qtm-button-action qtm-small ...">...</button>
  ...
  <button class="qtm-button-trigger qtm-small ...">...</button>
  ...
  <ul class="qtm-menu-item-list qtm-small">
    ...
  </ul>
  ...
</div>

Placement

You can add the qtm-right/ qtm-left/ qtm-center and qtm-top/ qtm-bottom classes to place the dropdown overlay. By default the placement is qtm-bottom qtm-left.

<div class="qtm-dropdown qtm-split-button qtm-visible qtm-top qtm-center">
  ...
</div>

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

<!---Filled primary-->
<div class="qtm-dropdown qtm-split-button">
  ...
  <button class="qtm-button-action qtm-filled qtm-primary ...">...</button>
  ...
  <button class="qtm-button-trigger qtm-filled qtm-primary ...">...</button>
  ...
</div>
<!---Ghost neutral-->
<div class="qtm-dropdown qtm-split-button">
  ...
  <button class="qtm-button-action qtm-ghost qtm-neutral ...">...</button>
  ...
  <button class="qtm-button-trigger qtm-ghost qtm-neutral ...">...</button>
  ...
</div>
<!---Ghost primary-->
<div class="qtm-dropdown qtm-split-button">
  ...
  <button class="qtm-button-action qtm-ghost qtm-primary ...">...</button>
  ...
  <button class="qtm-button-trigger qtm-ghost qtm-primary ...">...</button>
  ...
</div>

Disabled

If you want to disable your split button, all elements in this split button must be disabled

Filled primary

Ghost neutral

Ghost primary

<!---Filled primary-->
<div class="qtm-dropdown qtm-split-button">
  ...
  <button class="qtm-button-action qtm-filled qtm-primary ..." disabled>
    ...
  </button>
  ...
  <button class="qtm-button-trigger qtm-filled qtm-primary ..." disabled>
    ...
  </button>
  ...
</div>

Scrolling

If not all menu items are displayed at once, menus can be scrollable by using the .qtm-scrollable class.

By default, it displays the five first items and the half of the sixth one. Besides, you can custom number of visible items by using "--nb-visible-items"

<div class="qtm-dropdown qtm-split-button qtm-visible">
  ...
  <ul class="qtm-menu-item-list qtm-scrollable" style="--nb-visible-items: 2">
    ...
  </ul>
  ...
</div>