Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Tag

A squarer, smaller chip for metadata such as topics and versions.

Actions and feedback9 classesNo JavaScriptLight and dark

Example

Full

Classes

9 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.

ClassTypeWhat it does
Base Base class of the tag. On a <span> in the example. Sets hidden by default, inline-flex display, alignment, gap, height and padding, and 14 custom properties.
CSS
:where(.chip > svg, .tag > svg) {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.tag {
  --chip-h: 1.5rem;
  --chip-px: 0.5rem;
  --chip-fs: 0.75rem;
  gap: 0.25rem;
  border-radius: var(--m-radius-sm);
}
Tone Primary tone. On a <span> in the example. Sets --tone and --tone-fg.
CSS
.btn-primary,
.alert-primary,
.callout-primary,
.banner-primary,
.badge-primary,
.chip-primary,
.tag-primary,
.spinner-primary,
.progress-primary,
.radial-progress-primary,
.tooltip-primary,
.status-primary {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
}
Tone Secondary tone. Not used in the example above. Sets --tone, --tone-fg and --tone-tint.
CSS
.btn-secondary,
.alert-secondary,
.callout-secondary,
.banner-secondary,
.badge-secondary,
.chip-secondary,
.tag-secondary,
.tooltip-secondary {
  --tone: var(--secondary);
  --tone-fg: var(--secondary-foreground);
  --tone-tint: var(--secondary-foreground);
}
Tone Accent tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-accent,
.alert-accent,
.callout-accent,
.banner-accent,
.badge-accent,
.chip-accent,
.tag-accent,
.spinner-accent,
.progress-accent,
.radial-progress-accent,
.tooltip-accent,
.status-accent {
  --tone: var(--accent);
  --tone-fg: var(--accent-foreground);
}
Tone Neutral tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-neutral,
.alert-neutral,
.callout-neutral,
.banner-neutral,
.badge-neutral,
.chip-neutral,
.tag-neutral,
.spinner-neutral,
.progress-neutral,
.radial-progress-neutral,
.tooltip-neutral,
.status-neutral {
  --tone: var(--foreground);
  --tone-fg: var(--background);
}
Tone Success tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-success,
.alert-success,
.callout-success,
.banner-success,
.badge-success,
.chip-success,
.tag-success,
.spinner-success,
.progress-success,
.radial-progress-success,
.tooltip-success,
.status-success {
  --tone: var(--success);
  --tone-fg: var(--success-foreground);
}
Tone Warning tone. On a <span> in the example. Sets --tone and --tone-fg.
CSS
.btn-warning,
.alert-warning,
.callout-warning,
.banner-warning,
.badge-warning,
.chip-warning,
.tag-warning,
.spinner-warning,
.progress-warning,
.radial-progress-warning,
.tooltip-warning,
.status-warning {
  --tone: var(--warning);
  --tone-fg: var(--warning-foreground);
}
Tone Danger tone. On a <span> in the example. Sets --tone and --tone-fg.
CSS
.btn-danger,
.alert-danger,
.callout-danger,
.banner-danger,
.badge-danger,
.chip-danger,
.tag-danger,
.spinner-danger,
.progress-danger,
.radial-progress-danger,
.tooltip-danger,
.status-danger {
  --tone: var(--danger);
  --tone-fg: var(--danger-foreground);
}
Tone Info tone. On a <span> in the example. Sets --tone and --tone-fg.
CSS
.btn-info,
.alert-info,
.callout-info,
.banner-info,
.badge-info,
.chip-info,
.tag-info,
.spinner-info,
.progress-info,
.radial-progress-info,
.tooltip-info,
.status-info {
  --tone: var(--info);
  --tone-fg: var(--info-foreground);
}

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">

<!-- Tag: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-2">
  <span class="tag">css</span>
  <span class="tag tag-primary">components</span>
  <span class="tag tag-info">docs</span>
  <span class="tag tag-warning">breaking</span>
  <span class="tag tag-danger">bug <details class="dismiss" open><summary class="chip-remove" aria-label="Remove"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></summary></details></span>
</div>

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

  • Built on details and summary, so it opens with Enter or Space and screen readers announce expanded and collapsed. A shared name makes a group exclusive.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Actions and feedbackBadgeSmall labels for counts and states in solid, soft and outline styles, with an optional status dot.Actions and feedbackChipCompact tokens for filters, selections and people, removable and selectable without script.Actions and feedbackKeyboard keyKeyboard keys and shortcuts in five sizes.Actions and feedbackSpinnerLoading indicators: spinner, ring, dots, bars and pulse, in five sizes and eight tones.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.