Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Chip

Compact tokens for filters, selections and people, removable and selectable without script.

Actions and feedback17 classesNo JavaScriptLight and dark

Example

Full

Classes

17 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 chip. On a <span> in the example. Sets absolute position, width, height, margin, opacity and native control styling, and 15 custom properties.
CSS
.chip:has(> input:checked) {
  --chip-bg: var(--tone);
  --chip-border: var(--tone);
  --chip-fg: var(--tone-fg);
}

.chip:where(a, button, label):hover {
  --chip-bg: color-mix(in oklab, var(--tone-tint) 12%, var(--surface));
  cursor: pointer;
}
Part Part of the chip. On a <span> in the example. Sets alignment, width, height, margin and corner radius.
CSS
.chip-icon {
  flex: none;
  width: calc(var(--chip-h) - 0.5rem);
  height: calc(var(--chip-h) - 0.5rem);
  margin-inline-start: calc(var(--chip-px) * -0.6);
  border-radius: var(--m-radius-full);
  object-fit: cover;
}
Part Part of the chip. On a <summary> in the example. Sets inline-grid display, alignment, width, height, margin and corner radius.
CSS
.chip-remove:hover {
  opacity: 1;
  background-color: color-mix(in oklab, currentColor 14%, transparent);
}

.chip-remove:focus-visible {
  opacity: 1;
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}
Modifier Modifier, combined with the chip class. On a <span> in the example. Sets --chip-bg.
CSS
.chip-outline {
  --chip-bg: transparent;
}
Size Extra small size. On a <span> in the example. Sets --chip-h, --chip-px and --chip-fs.
CSS
.chip-xs {
  --chip-h: 1.375rem;
  --chip-px: 0.5rem;
  --chip-fs: 0.6875rem;
}
Size Small size. On a <span> in the example. Sets --chip-h, --chip-px and --chip-fs.
CSS
.chip-sm {
  --chip-h: 1.625rem;
  --chip-px: 0.625rem;
  --chip-fs: 0.75rem;
}
Size Medium, the default size. On a <span> in the example. Sets --chip-h, --chip-px and --chip-fs.
CSS
.chip-md {
  --chip-h: 2rem;
  --chip-px: 0.75rem;
  --chip-fs: 0.8125rem;
}
Size Large size. On a <span> in the example. Sets --chip-h, --chip-px and --chip-fs.
CSS
.chip-lg {
  --chip-h: 2.375rem;
  --chip-px: 0.875rem;
  --chip-fs: 0.875rem;
}
Size Extra large size. On a <span> in the example. Sets --chip-h, --chip-px and --chip-fs.
CSS
.chip-xl {
  --chip-h: 2.75rem;
  --chip-px: 1rem;
  --chip-fs: 0.9375rem;
}
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. 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. Not used in the example above. 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. Not used in the example above. 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. Not used in the example above. 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">

<!-- Chip: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-2">
  <span class="chip">Design</span>
  <span class="chip chip-primary">Engineering</span>
  <span class="chip chip-outline"><span class="chip-icon bg-primary"></span>Ada Lovelace</span>
  <span class="chip chip-success">Approved <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>
  <label class="chip chip-primary"><input type="checkbox" checked><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> Remote</label>
  <label class="chip chip-primary"><input type="checkbox"> Full time</label>
</div>
<div class="flex flex-wrap items-center gap-2 mt-3">
  <span class="chip chip-xs">xs</span>
  <span class="chip chip-sm">sm</span>
  <span class="chip chip-md">md</span>
  <span class="chip chip-lg">lg</span>
  <span class="chip chip-xl">xl</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

  • 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.
  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Checkboxes and radios stay real inputs, so they keep native keyboard behavior (Space toggles, arrow keys move within a radio group) and form submission.
  • 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 feedbackToastA fixed stack for toast messages in six positions, with a contained variant for previews.Actions and feedbackBadgeSmall labels for counts and states in solid, soft and outline styles, with an optional status dot.Actions and feedbackTagA squarer, smaller chip for metadata such as topics and versions.Actions and feedbackKeyboard keyKeyboard keys and shortcuts in five sizes.

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.