Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Badge

Small labels for counts and states in solid, soft and outline styles, with an optional status dot.

Actions and feedback19 classesNo JavaScriptLight and dark

Example

Full

Classes

19 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 badge. On a <span> in the example. Sets inline-flex display, alignment, gap, height, width and padding, and 11 custom properties.
CSS
@supports not (color: oklch(from red l c h)) {
  .btn,
  .alert,
  .callout,
  .banner,
  .badge,
  .chip,
  .tag,
  .notification,
  .toggle-group-item,
  .fab-label {
    --tone-ink: var(--tone);
  }
}

.btn,
.alert,
.callout,
.banner,
.badge,
.chip,
.tag,
.notification,
.toggle-group-item,
.fab-label,
.progress,
.radial-progress {
  --tone-tint: var(--tone);
  --tone-ink: oklch(from var(--tone) calc(min(l, 0.5) * (1 - var(--mode)) + max(l, 0.8) * var(--mode)) min(c, 0.2) h);
}
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. On a <span> in the example. 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. On a <span> in the example. 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. On a <span> in the example. 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. On a <span> in the example. 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);
}
Modifier Modifier, combined with the badge class. On a <span> in the example. Sets background, and --badge-bg, --badge-fg and --badge-border.
CSS
.badge-solid.badge-dot::before {
  background-color: currentColor;
}

.badge-solid {
  --badge-bg: var(--tone);
  --badge-fg: var(--tone-fg);
  --badge-border: transparent;
}
Modifier Modifier, combined with the badge class. Not used in the example above. Sets --badge-bg, --badge-fg and --badge-border.
CSS
.badge-soft {
  --badge-bg: color-mix(in oklab, var(--tone-tint) 10%, transparent);
  --badge-fg: var(--tone-ink);
  --badge-border: color-mix(in oklab, var(--tone-tint) 16%, transparent);
}
Modifier Modifier, combined with the badge class. On a <span> in the example. Sets --badge-bg, --badge-fg and --badge-border.
CSS
.badge-outline {
  --badge-bg: transparent;
  --badge-fg: var(--tone-ink);
  --badge-border: color-mix(in oklab, var(--tone-tint) 50%, transparent);
}
Size Extra small size. On a <span> in the example. Sets --badge-h, --badge-px and --badge-fs.
CSS
.badge-xs {
  --badge-h: 1.125rem;
  --badge-px: 0.3125rem;
  --badge-fs: 0.625rem;
}
Size Small size. On a <span> in the example. Sets --badge-h, --badge-px and --badge-fs.
CSS
.badge-sm {
  --badge-h: 1.25rem;
  --badge-px: 0.4375rem;
  --badge-fs: 0.6875rem;
}
Size Medium, the default size. On a <span> in the example. Sets --badge-h, --badge-px and --badge-fs.
CSS
.badge-md {
  --badge-h: 1.375rem;
  --badge-px: 0.5rem;
  --badge-fs: 0.75rem;
}
Size Large size. On a <span> in the example. Sets --badge-h, --badge-px and --badge-fs.
CSS
.badge-lg {
  --badge-h: 1.625rem;
  --badge-px: 0.625rem;
  --badge-fs: 0.8125rem;
}
Size Extra large size. On a <span> in the example. Sets --badge-h, --badge-px and --badge-fs.
CSS
.badge-xl {
  --badge-h: 1.875rem;
  --badge-px: 0.75rem;
  --badge-fs: 0.875rem;
}
Modifier Modifier, combined with the badge class. On a <span> in the example. Sets generated content, alignment, width, height, margin and corner radius.
CSS
.badge-dot::before {
  content: "";
  flex: none;
  width: 0.4em;
  height: 0.4em;
  margin-inline-end: 0.1em;
  border-radius: var(--m-radius-full);
  background-color: var(--tone);
}

.badge-solid.badge-dot::before {
  background-color: currentColor;
}
Modifier Modifier, combined with the badge class. On a <span> in the example. Sets corner radius.
CSS
.badge-pill {
  border-radius: var(--m-radius-full);
}

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

<!-- Badge: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-2">
  <span class="badge">Draft</span>
  <span class="badge badge-primary">New</span>
  <span class="badge badge-success badge-dot">Active</span>
  <span class="badge badge-warning badge-dot">Pending</span>
  <span class="badge badge-danger badge-solid">Overdue</span>
  <span class="badge badge-info badge-outline">Beta</span>
  <span class="badge badge-accent badge-solid badge-pill">Pro</span>
  <span class="badge badge-secondary">Archived</span>
  <span class="badge badge-neutral badge-solid">v2.4.0</span>
</div>
<div class="flex flex-wrap items-center gap-2 mt-3">
  <span class="badge badge-primary badge-solid badge-xs">xs</span>
  <span class="badge badge-primary badge-solid badge-sm">sm</span>
<!-- 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 button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • 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 feedbackBannerA full width announcement bar for the top of the page, solid, soft or gradient.Actions and feedbackToastA fixed stack for toast messages in six positions, with a contained variant for previews.Actions and feedbackChipCompact tokens for filters, selections and people, removable and selectable without script.Actions and feedbackTagA squarer, smaller chip for metadata such as topics and versions.

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.