Button group component

Example

Full

button-group.html

<div class="btn-toolbar" role="toolbar" aria-label="Editor">
  <div class="btn-group" role="group" aria-label="History">
    <button class="btn btn-outline btn-neutral btn-sm">Undo</button>
    <button class="btn btn-outline btn-neutral btn-sm">Redo</button>
  </div>
  <div class="join">
    <button class="btn btn-sm">Day</button>
    <button class="btn btn-sm btn-active">Week</button>
    <button class="btn btn-sm">Month</button>
  </div>
  <div class="join">
    <button class="btn btn-outline btn-neutral btn-sm btn-square" aria-label="Previous"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
    <button class="btn btn-outline btn-neutral btn-sm">Page 2</button>
    <button class="btn btn-outline btn-neutral btn-sm btn-square" aria-label="Next"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
  </div>
</div>
<div class="flex gap-4 mt-3">
  <div class="join-vertical">
    <button class="btn btn-soft">Top</button>
    <button class="btn btn-soft">Middle</button>
    <button class="btn btn-soft">Bottom</button>
  </div>
  <div class="btn-group-vertical">
    <button class="btn btn-outline">First</button>
    <button class="btn btn-outline">Second</button>
  </div>
</div>

Classes

5 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class	Type	What it does
	Part	Part of the button group. On a <div> in the example. Sets inline-flex display, alignment, stacking order, margin, corner radius and border. CSS `.join, .btn-group { display: inline-flex; align-items: stretch; } :is(.join, .btn-group, .join-vertical, .btn-group-vertical) > :where(:hover) { z-index: 1; }`
	Part	Part of the button group. On a <div> in the example. Sets inline-flex display, alignment, stacking order, margin and corner radius. CSS `.join-vertical, .btn-group-vertical { display: inline-flex; flex-direction: column; } :is(.join, .btn-group, .join-vertical, .btn-group-vertical) > :where(:hover) { z-index: 1; }`
	Base	Base class of the button group. On a <div> in the example. Sets inline-flex display, alignment and stacking order. CSS `.join, .btn-group { display: inline-flex; align-items: stretch; } :is(.join, .btn-group, .join-vertical, .btn-group-vertical) > :where(:hover) { z-index: 1; }`
	Part	Part of the button group. On a <div> in the example. Sets inline-flex display, alignment and stacking order. CSS `.join-vertical, .btn-group-vertical { display: inline-flex; flex-direction: column; } :is(.join, .btn-group, .join-vertical, .btn-group-vertical) > :where(:hover) { z-index: 1; }`
	Part	Part of the button group. On a <div> in the example. Sets flex display, alignment and gap. CSS `.btn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }`

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Button group: start from the base class, then add modifiers -->
<div class="btn-toolbar" role="toolbar" aria-label="Editor">
  <div class="btn-group" role="group" aria-label="History">
    <button class="btn btn-outline btn-neutral btn-sm">Undo</button>
    <button class="btn btn-outline btn-neutral btn-sm">Redo</button>
  </div>
  <div class="join">
    <button class="btn btn-sm">Day</button>
    <button class="btn btn-sm btn-active">Week</button>
    <button class="btn btn-sm">Month</button>
  </div>
  <div class="join">
    <button class="btn btn-outline btn-neutral btn-sm btn-square" aria-label="Previous"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
    <button class="btn btn-outline btn-neutral btn-sm">Page 2</button>
    <button class="btn btn-outline btn-neutral btn-sm btn-square" aria-label="Next"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
<!-- the full example is in the Code tab above -->

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components