Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Status

A small status dot for presence and health, with an optional ping animation.

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 status. On a <span> in the example. Sets inline-block display, alignment, width, height, corner radius and background, and --tone and --status-size.
CSS
.status {
  --tone: var(--muted-foreground);
  --status-size: 0.625rem;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--status-size);
  height: var(--status-size);
  border-radius: var(--m-radius-full);
  background-color: var(--tone);
  vertical-align: middle;
}

.indicator-item.status {
  box-shadow: 0 0 0 2px var(--background);
}
Modifier Modifier, combined with the status class. On a <span> in the example. Sets --tone.
CSS
.status-online {
  --tone: var(--success);
}
Modifier Modifier, combined with the status class. On a <span> in the example. Sets --tone.
CSS
.status-offline {
  --tone: var(--muted-foreground);
}
Modifier Modifier, combined with the status class. On a <span> in the example. Sets --tone.
CSS
.status-away {
  --tone: var(--warning);
}
Modifier Modifier, combined with the status class. On a <span> in the example. Sets --tone.
CSS
.status-busy {
  --tone: var(--danger);
}
Modifier Modifier, combined with the status class. On a <span> in the example. Sets generated content, absolute position, offsets, corner radius, background and animation.
CSS
@media (prefers-reduced-motion: reduce) {
  .skeleton, .toast-item, .toast > .alert, .status-ping::after {
    animation: none;
  }
}

.status-ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  animation: m-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
Size Extra small size. On a <span> in the example. Sets --status-size.
CSS
.status-xs {
  --status-size: 0.375rem;
}
Size Small size. On a <span> in the example. Sets --status-size.
CSS
.status-sm {
  --status-size: 0.5rem;
}
Size Medium, the default size. On a <span> in the example. Sets --status-size.
CSS
.status-md {
  --status-size: 0.625rem;
}
Size Large size. On a <span> in the example. Sets --status-size.
CSS
.status-lg {
  --status-size: 0.75rem;
}
Size Extra large size. On a <span> in the example. Sets --status-size.
CSS
.status-xl {
  --status-size: 1rem;
}
Tone Primary tone. Not used in the example above. 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 and --tone-fg.
CSS
.spinner-secondary,
.progress-secondary,
.radial-progress-secondary,
.status-secondary {
  --tone: color-mix(in oklab, var(--secondary-foreground) 45%, var(--secondary));
  --tone-fg: var(--secondary);
}
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. 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. 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">

<!-- Status: start from the base class, then add modifiers -->
<ul class="space-y-2 text-sm">
  <li class="flex items-center gap-2"><span class="status status-online status-ping"></span> Online</li>
  <li class="flex items-center gap-2"><span class="status status-away"></span> Away</li>
  <li class="flex items-center gap-2"><span class="status status-busy"></span> Busy</li>
  <li class="flex items-center gap-2"><span class="status status-offline"></span> Offline</li>
  <li class="flex items-center gap-2"><span class="status status-info status-xs"></span><span class="status status-info status-sm"></span><span class="status status-info status-md"></span><span class="status status-info status-lg"></span><span class="status status-info status-xl"></span> Sizes</li>
</ul>

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

  • 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.
Two factor and sign inTwo factor statusAccount settings card: on or off badge, the methods in use with manage and remove actions, recovery codes left with a regenerate button and when the account was last verified. The .auth-status-off modifier turns the card into a prompt to switch it on.Actions and feedbackTooltipA CSS only tooltip read from the data-tip attribute, shown on hover and keyboard focus, in four positions and eight tones.Actions and feedbackIndicatorPlaces a badge or status dot on any corner or edge of another element.Actions and feedbackEmpty stateA friendly placeholder for empty lists and search results, with an icon, text and actions.

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.