Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Alert

Inline messages in soft, outline and solid styles with an icon, title, description, actions and a script free dismiss.

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 alert. On a <div> in the example. Sets hidden by default, flex display, alignment, gap, width and padding, and 9 custom properties.
CSS
.alert > .dismiss {
  margin: -0.25rem -0.375rem -0.25rem 0;
}

:is(.dismissible, .alert, .callout, .banner, .toast-item, .notification, .chip, .tag):has(> .dismiss:not([open])) {
  display: none;
}
Part Part of the alert. On a <svg> in the example. Sets alignment, width, height, margin and text color.
CSS
.alert-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-block: 0.0625rem;
  color: var(--alert-accent);
}
Part Part of the alert. On a <div> in the example. Sets alignment and width.
CSS
.alert-content {
  flex: 1 1 12rem;
  min-width: 0;
}
Part Part of the alert. On a <p> in the example. Sets text color, font weight, text style and margin.
CSS
.alert-title + .alert-description {
  margin-top: 0.125rem;
}

.alert-title {
  color: var(--alert-accent);
  font-weight: 600;
  line-height: 1.4;
}
Part Part of the alert. On a <p> in the example. Sets text color.
CSS
.alert-description {
  color: color-mix(in oklab, var(--alert-fg) 82%, transparent);
}

.alert-title + .alert-description {
  margin-top: 0.125rem;
}
Part Part of the alert. On a <div> in the example. Sets flex display, alignment, gap and margin.
CSS
.alert-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}
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, --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 <div> 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 <div> 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 <div> 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 <div> 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 alert class. Not used in the example above. Sets 4 custom properties.
CSS
.alert-soft {
  --alert-bg: color-mix(in oklab, var(--tone-tint) 7%, var(--surface));
  --alert-border: color-mix(in oklab, var(--tone-tint) 22%, var(--surface));
  --alert-fg: var(--foreground);
  --alert-accent: var(--tone-ink);
}
Modifier Modifier, combined with the alert class. On a <div> in the example. Sets 4 custom properties.
CSS
.alert-outline {
  --alert-bg: var(--surface);
  --alert-border: color-mix(in oklab, var(--tone-tint) 55%, var(--surface));
  --alert-fg: var(--foreground);
  --alert-accent: var(--tone-ink);
}
Modifier Modifier, combined with the alert class. On a <div> in the example. Sets 4 custom properties.
CSS
.alert-solid {
  --alert-bg: var(--tone);
  --alert-border: var(--tone);
  --alert-fg: var(--tone-fg);
  --alert-accent: var(--tone-fg);
}
Part Part of the alert. On a <details> in the example. Sets alignment, grid display, width, height, corner radius and text color.
CSS
.dismiss {
  flex: none;
}

.dismiss > summary::-webkit-details-marker {
  display: none;
}
Part Part of the alert. On a <div> in the example. A hook for state rules such as :is(.dismissible.
CSS
:is(.dismissible, .alert, .callout, .banner, .toast-item, .notification, .chip, .tag):has(> .dismiss:not([open])) {
  display: none;
}

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

<!-- Alert: start from the base class, then add modifiers -->
<div class="space-y-3">
  <div class="alert alert-info" role="status">
    <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
    <div class="alert-content">
      <p class="alert-title">Update available</p>
      <p class="alert-description">Version 2.4 adds offline sync and faster search.</p>
    </div>
    <div class="alert-actions"><button class="btn btn-sm btn-info">Update</button></div>
  </div>
  <div class="alert alert-success alert-outline" role="status">
    <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m8.5 12 2.5 2.5 4.5-5"/></svg>
    <div class="alert-content"><p class="alert-title">Payment received</p><p class="alert-description">Invoice 1042 was paid in full.</p></div>
    <details class="dismiss" open><summary aria-label="Dismiss"><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>
  </div>
<!-- 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.
  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Announces itself with role="status" (polite) or role="alert" (assertive). Use alert only for messages that need immediate attention.
  • 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 feedbackToggle groupA row of joined toggles built from checkboxes, so several can be on at once.Actions and feedbackSwapSwaps two pieces of content when its checkbox is checked, with fade, rotate, scale and flip effects.Actions and feedbackCalloutA highlighted note for documentation and long form content.Actions and feedbackBannerA full width announcement bar for the top of the page, solid, soft or gradient.

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.