New This website is new, your feedback will help us to improve it.

Button group

Overview

Use the .bsk-btn-group class to combine buttons together into groups. Use the .bsk-btn-toolbar class to combine groups together into toolbars.

For assistive technologies, all button groups and toolbars should use a aria-label or aria-labelledby and role=group or role=toolbar attribute to describe themselves.

Variants

Default button group

Groups contain buttons.

<div class="bsk-btn-group inline-flex">
  <button type="button">Years</button>
  <button type="button">Months</button>
  <button type="button">Days</button>
  <button type="button">Hours</button>
</div>

Default button toolbar

<div role="toolbar" aria-label="Button toolbar example 1">
  <div class="bsk-btn-group inline-flex">
      <button type="button">Years</button>
      <button type="button">Months</button>
      <button type="button">Days</button>
      <button type="button">Hours</button>
  </div>
  <div class="bsk-btn-group inline-flex">
      <button type="button">Years</button>
      <button type="button">Months</button>
      <button type="button">Days</button>
      <button type="button">Hours</button>
  </div>
</div>

Sizes

Add one of these classes to alter the size of a button group:

Button Group Size Button Group Size Class
Large .bsk-btn-group-lg
Small .bsk-btn-group-sm
Extra-small .bsk-btn-group-xs

Individual buttons will inherit the size of each button group.







<!-- Large button group -->
<div class="bsk-btn-group bsk-btn-group-lg inline-flex" role="group" aria-label="Large button group example 1">
<button type="button">One</button>
<button type="button">Two</button>
<button type="button">Three</button>
</div>
<br /><br />

<!-- Regular button group -->
<div class="bsk-btn-group inline-flex" role="group" aria-label="Regular button group example 4">
<button type="button">One</button>
<button type="button">Two</button>
<button type="button">Three</button>
</div>
<br /><br />

<!-- Small button group -->
<div class="bsk-btn-group bsk-btn-group-sm inline-flex" role="group" aria-label="Small button group example 1">
<button type="button">One</button>
<button type="button">Two</button>
<button type="button">Three</button>
</div>
<br /><br />

<!-- Extra-small button group -->
<div class="bsk-btn-group bsk-btn-group-xs inline-flex" role="group" aria-label="Extra-small button group example 1">
<button type="button">One</button>
<button type="button">Two</button>
<button type="button">Three</button>
</div>

Layouts

Nested button group

Button groups can be nested to include drop-down menus with buttons in a group.

<div class="bsk-btn-group inline-flex" role="group" aria-label="Nested button group example 1">
  <button type="button">One</button>
  <button type="button">Two</button>
  <button type="button">Three</button>
  <div data-dropdown-wrapper class="bsk-dropdown">
      <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
          Dropdown
          <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
      </button>
      <div data-dropdown-menu class="hidden absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1">
          <div class="py-1" role="menu">
              <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
              <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
          </div>
      </div>
  </div>
</div>

Vertical button group

Use the .bsk-btn-group-vertical class and .bsk-btn-group to stack buttons vertically.


Split button drop-downs and button toolbars are not supported in vertical button groups.

<div class="bsk-btn-group bsk-btn-group-vertical" role="group" aria-label="Nested button group example 1">
  <button type="button">One</button>
  <button type="button">Two</button>
  <button type="button">Three</button>
  <div data-dropdown-wrapper class="bsk-dropdown">
      <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
          Dropdown
          <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
      </button>
      <div data-dropdown-menu class="hidden absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1">
          <div class="py-1" role="menu">
              <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
              <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
          </div>
      </div>
  </div>
</div>