Actions and feedback
Button
Buttons in eight tones, seven styles and five sizes, with loading, active and disabled states and a visible focus ring.
Example
Classes
24 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 |
|---|---|---|
| Base | Base class of the button. On a <button> in the example. Sets inline-flex display, alignment, gap, height, padding and border, and 15 custom properties.CSS |
|
| Tone | Primary tone. Not used in the example above. Sets --tone and --tone-fg.CSS |
|
| Tone | Secondary tone. On a <button> in the example. Sets --tone, --tone-fg and --tone-tint.CSS |
|
| Tone | Accent tone. On a <button> in the example. Sets --tone and --tone-fg.CSS |
|
| Tone | Neutral tone. On a <button> in the example. Sets --tone and --tone-fg.CSS |
|
| Tone | Success tone. On a <button> in the example. Sets --tone and --tone-fg.CSS |
|
| Tone | Warning tone. On a <button> in the example. Sets --tone and --tone-fg.CSS |
|
| Tone | Danger tone. On a <button> in the example. Sets --tone and --tone-fg.CSS |
|
| Tone | Info tone. On a <button> in the example. Sets --tone and --tone-fg.CSS |
|
| Modifier | Modifier, combined with the btn class. Not used in the example above. Sets 6 custom properties.CSS |
|
| Modifier | Modifier, combined with the btn class. On a <button> in the example. Sets 6 custom properties.CSS |
|
| Modifier | Modifier, combined with the btn class. On a <button> in the example. Sets border, and 6 custom properties.CSS |
|
| Modifier | Modifier, combined with the btn class. On a <button> in the example. Sets border, and 6 custom properties.CSS |
|
| Modifier | Modifier, combined with the btn class. On a <button> in the example. Sets text style and border, and 6 custom properties.CSS |
|
| Modifier | Modifier, combined with the btn class. On a <button> in the example. Sets border, and 6 custom properties.CSS |
|
| Modifier | Modifier, combined with the btn class. On a <button> in the example. Sets background, and --btn-shadow.CSS |
|
| Size | Extra small size. On a <button> in the example. Sets 4 custom properties.CSS |
|
| Size | Small size. On a <button> in the example. Sets 4 custom properties.CSS |
|
| Size | Medium, the default size. On a <button> in the example. Sets 4 custom properties.CSS |
|
| Size | Large size. On a <button> in the example. Sets 4 custom properties.CSS |
|
| Size | Extra large size. On a <button> in the example. Sets 4 custom properties.CSS |
|
| Modifier | Modifier, combined with the btn class. On a <button> in the example. Sets background.CSS |
|
| Modifier | Modifier, combined with the btn class. On an <a> in the example. Sets background, transform, opacity, not-allowed cursor and shadow.CSS |
|
| Modifier | Modifier, combined with the btn class. On a <button> in the example. Sets background, progress cursor, generated content, alignment, width and height.CSS |
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.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<!-- Button: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-2">
<button class="btn">Save changes</button>
<button class="btn btn-soft">Soft</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>
<button class="btn btn-dashed"><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> Add item</button>
<button class="btn btn-gradient"><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 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg> Upgrade</button>
</div>
<div class="flex flex-wrap items-center gap-2 mt-3">
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-neutral">Neutral</button>
<button class="btn btn-success">Success</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.
Accessibility
- Use
buttonfor actions andafor navigation. Icon only buttons need anaria-label; decorative icons carryaria-hidden="true". - Animations stop under
prefers-reduced-motion: reduce. Mark busy regions witharia-busy="true"and give spinners an accessible name. - Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.