Split buttons

Split button dropdowns

Split button dropdowns (Combo buttons) are preferred when more than one action is associated with a button. The primary action is visible and available on the button itself while the secondary actions are accessed through the dropdown menu.

You can create split button dropdowns with .c-btn-group, .c-btn and .c-dropdown-button__toggle.

Settings

p
  .c-btn-group
    .c-btn.-with-icon
      i.kzicon.kzicon-gear
      | Settings
    .c-btn.-shape-square.c-dropdown-button__toggle data-toggle="dropdown"
      i.kzicon.kzicon-arrow-down

    ul.c-dropdown-button__menu
      li: a.c-dropdown__item Archive
      li: a.c-dropdown__item Purge
p
  .c-btn-group
    .c-btn--primary.-with-icon
      i.kzicon.kzicon-gear
      | Settings
    .c-btn--primary.-shape-square.c-dropdown-button__toggle data-toggle="dropdown"
      i.kzicon.kzicon-arrow-down

    ul.c-dropdown-button__menu
      li: a.c-dropdown__item Archive
      li: a.c-dropdown__item Purge

p
  .c-btn-group
    .c-btn--secondary.-with-icon
      i.kzicon.kzicon-gear
      | Settings
    .c-btn--secondary.-shape-square.c-dropdown-button__toggle data-toggle="dropdown"
      i.kzicon.kzicon-arrow-down

    ul.c-dropdown-button__menu
      li: a.c-dropdown__item Archive
      li: a.c-dropdown__item Purge

<p>
  <div class="c-btn-group">
    <div class="c-btn -with-icon">
      <i class="kzicon kzicon-gear"></i>Settings
    </div>
    <div class="c-btn -shape-square c-dropdown-button__toggle" data-toggle="dropdown">
      <i class="kzicon kzicon-arrow-down"></i>
    </div>
    <ul class="c-dropdown-button__menu">
      <li>
        <a class="c-dropdown__item">Archive</a>
      </li>
      <li>
        <a class="c-dropdown__item">Purge</a>
      </li>
    </ul>
  </div>
</p>
<p>
  <div class="c-btn-group">
    <div class="c-btn--primary -with-icon">
      <i class="kzicon kzicon-gear"></i>Settings
    </div>
    <div class="c-btn--primary -shape-square c-dropdown-button__toggle" data-toggle="dropdown">
      <i class="kzicon kzicon-arrow-down"></i>
    </div>
    <ul class="c-dropdown-button__menu">
      <li>
        <a class="c-dropdown__item">Archive</a>
      </li>
      <li>
        <a class="c-dropdown__item">Purge</a>
      </li>
    </ul>
  </div>
</p>
<p>
  <div class="c-btn-group">
    <div class="c-btn--secondary -with-icon">
      <i class="kzicon kzicon-gear"></i>Settings
    </div>
    <div class="c-btn--secondary -shape-square c-dropdown-button__toggle" data-toggle="dropdown">
      <i class="kzicon kzicon-arrow-down"></i>
    </div>
    <ul class="c-dropdown-button__menu">
      <li>
        <a class="c-dropdown__item">Archive</a>
      </li>
      <li>
        <a class="c-dropdown__item">Purge</a>
      </li>
    </ul>
  </div>
</p>