Button shapes component

Example

Full

button-shapes.html

<div class="flex flex-wrap items-center gap-2">
  <button class="btn btn-square" aria-label="Add"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
  <button class="btn btn-circle btn-outline" aria-label="Like"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z"/></svg></button>
  <button class="btn btn-pill btn-soft">Pill button</button>
  <button class="btn btn-wide btn-neutral">Wide</button>
  <button class="btn btn-icon" aria-label="Edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button>
  <button class="btn btn-icon btn-danger" aria-label="Delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
</div>
<button class="btn btn-block mt-3">Continue to checkout</button>

Classes

6 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 shapes. On a <button> in the example. Sets width and padding. CSS `.btn-square, .btn-circle { width: var(--btn-h); padding-inline: 0; } .btn-loading:where(.btn-square, .btn-circle, .btn-icon) > * { display: none; }`
	Part	Part of the button shapes. On a <button> in the example. Sets width, padding and hidden by default, and `--btn-radius`. CSS `.btn-circle, .btn-pill { --btn-radius: var(--m-radius-full); } .btn-square, .btn-circle { width: var(--btn-h); padding-inline: 0; }`
	Base	Base class of the button shapes. On a <button> in the example. Sets `--btn-radius`. CSS `.btn-circle, .btn-pill { --btn-radius: var(--m-radius-full); }`
	Part	Part of the button shapes. On a <button> in the example. Sets flex display and width. CSS `.btn-block { display: flex; width: 100%; }`
	Part	Part of the button shapes. On a <button> in the example. Sets width. CSS `.btn-wide { min-width: 14rem; }`
	Part	Part of the button shapes. On a <button> in the example. Sets width, padding, text color, hidden by default and border, and 7 custom properties. CSS `.btn-icon:where(:hover) { color: var(--tone-ink); } .btn-loading:where(.btn-square, .btn-circle, .btn-icon) > * { display: none; }`

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 shapes: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-2">
  <button class="btn btn-square" aria-label="Add"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
  <button class="btn btn-circle btn-outline" aria-label="Like"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z"/></svg></button>
  <button class="btn btn-pill btn-soft">Pill button</button>
  <button class="btn btn-wide btn-neutral">Wide</button>
  <button class="btn btn-icon" aria-label="Edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button>
  <button class="btn btn-icon btn-danger" aria-label="Delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
</div>
<button class="btn btn-block mt-3">Continue to checkout</button>

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