Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Toast

A fixed stack for toast messages in six positions, with a contained variant for previews.

Actions and feedback10 classesNo JavaScriptLight and dark

Example

Full

Classes

10 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 toast. On a <div> in the example. Sets fixed position, stacking order, offsets, flex display, alignment and gap.
CSS
.toast > :where(*) {
  pointer-events: auto;
}

.toast-item, .toast > .alert {
  box-shadow: var(--m-shadow-lg);
  animation: m-toast-in var(--m-duration-slow) var(--m-ease) both;
}
Modifier Modifier, combined with the toast class. On a <div> in the example. Sets offsets.
CSS
.toast-top {
  inset-block-start: 1rem;
  inset-block-end: auto;
}
Modifier Modifier, combined with the toast class. On a <div> in the example. Sets offsets.
CSS
.toast-bottom {
  inset-block-start: auto;
  inset-block-end: 1rem;
}
Modifier Modifier, combined with the toast class. Not used in the example above. Sets offsets.
CSS
.toast-start {
  inset-inline-start: 1rem;
  inset-inline-end: auto;
}
Modifier Modifier, combined with the toast class. On a <div> in the example. Sets offsets and transform.
CSS
.toast-center {
  inset-inline-start: 50%;
  inset-inline-end: auto;
  translate: -50% 0;
}
Modifier Modifier, combined with the toast class. On a <div> in the example. Sets offsets.
CSS
.toast-end {
  inset-inline-start: auto;
  inset-inline-end: 1rem;
}
Modifier Modifier, combined with the toast class. On a <div> in the example. Sets absolute position and width.
CSS
.toast-contained {
  position: absolute;
  width: min(24rem, calc(100% - 2rem));
}
Part Part of the toast. On a <div> in the example. Sets hidden by default, flex display, alignment, gap, width and padding, and 4 custom properties.
CSS
.toast-item[data-tone] {
  --tone: var(--info);
}

.toast-item[data-tone=danger] {
  --tone: var(--danger);
}
Part Part of the toast. On a <p> in the example. Sets font weight and margin.
CSS
.toast-title {
  font-weight: 600;
}

.toast-title + .toast-description {
  margin-top: 0.125rem;
}
Part Part of the toast. On a <p> in the example. Sets text color.
CSS
.toast-description {
  color: var(--muted-foreground);
}

.toast-title + .toast-description {
  margin-top: 0.125rem;
}

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

<!-- Toast: start from the base class, then add modifiers -->
<div class="relative h-64 rounded-xl border bg-muted overflow-hidden">
  <div class="toast toast-contained toast-top toast-center">
    <div class="alert alert-success alert-solid" 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">Changes saved</div></div>
  </div>
  <div class="toast toast-contained toast-bottom toast-end">
    <div class="toast-item" role="status">
      <svg class="size-5 shrink-0 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg>
      <div class="flex-1">
        <p class="toast-title">Message sent</p>
        <p class="toast-description">Your invite is on its way to the team.</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>
  </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.
  • 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.
InteractiveToast managerMonsoon.toast("Saved", { tone: "success" }) shows a toast in a polite live region. Toasts stack per position, pause while hovered or focused, can carry an action and can be swiped away. A button can show one with data-m-toast. Needs monsoon.js.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.Actions and feedbackBadgeSmall labels for counts and states in solid, soft and outline styles, with an optional status dot.

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.