Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Toast manager

Monsoon.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.

Interactive7 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-toast="Message"

Options

OptionDescription
data-m-toast-tone="success" (info, warning, danger)
data-m-toast-description
data-m-toast-position="top-center" (top or bottom, start, center or end)
data-m-toast-duration="0" (stays until dismissed)

Methods

MethodDescription
Monsoon.toast(message, { title, description, tone, position, duration, action: { label, onClick }, dismissible, max })
returns { el, close(), update(message, options) }

Events

EventDescription
monsoon:toast { toast }
monsoon:toast-close { toast }

Classes

7 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 manager. Not used in the example above. 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. Not used in the example above. Sets stacking order, alignment and transition.
CSS
.toast-stack {
  z-index: 90;
}

.toast-stack > .toast-item {
  align-items: center;
  touch-action: pan-y;
  transition: translate var(--m-duration) var(--m-ease), opacity var(--m-duration);
}
Modifier Modifier, combined with the toast class. Not used in the example above. 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);
}
Modifier Modifier, combined with the toast class. Not used in the example above. Sets grid display, alignment, width, height, margin and text color.
CSS
.toast-icon > svg {
  width: 100%;
  height: 100%;
}

.toast-icon {
  display: grid;
  flex: none;
  align-self: flex-start;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .0625rem;
  color: var(--tone);
}
Modifier Modifier, combined with the toast class. Not used in the example above. Sets alignment and width.
CSS
.toast-content {
  flex: 1;
  min-width: 0;
}
Modifier Modifier, combined with the toast class. Not used in the example above. Sets alignment.
CSS
.toast-action {
  flex: none;
}
Modifier Modifier, combined with the toast class. Not used in the example above. Sets grid display, alignment, width, height, margin and text color.
CSS
.toast-close > svg {
  width: 1rem;
  height: 1rem;
}

.toast-close:focus-visible {
  outline: var(--m-ring);
  outline-offset: 0;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Toast manager: start from the base class, then add modifiers -->
<div class="flex flex-wrap gap-2">
  <button type="button" class="btn btn-sm" data-m-toast="Changes saved" data-m-toast-tone="success" data-m-toast-description="Your profile is up to date.">Success</button>
  <button type="button" class="btn btn-sm btn-outline" data-m-toast="Payment failed" data-m-toast-tone="danger" data-m-toast-description="Check the card details and try again.">Error</button>
  <button type="button" class="btn btn-sm btn-outline" data-m-toast="Storage almost full" data-m-toast-tone="warning" data-m-toast-position="top-center">Top center</button>
  <button type="button" class="btn btn-sm btn-ghost" onclick="Monsoon.toast('Conversation archived', { action: { label: 'Undo', onClick: () => Monsoon.toast('Restored', { tone: 'success' }) } })">With action</button>
</div>

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 feedbackToastA fixed stack for toast messages in six positions, with a contained variant for previews.InteractiveTree with checkboxesWith data-m-tree-checkbox every item gets a tristate checkbox: checking a branch checks everything below it, and a branch with some checked children shows as mixed. Space or Enter toggles. Needs monsoon.js.InteractiveSplit panesResizable panes side by side or stacked: drag the separator, or focus it and use the arrows (Shift for bigger steps), Home, End and Enter to collapse. Minimum sizes, and sizes saved in localStorage when asked. Needs monsoon.js.InteractivePassword strengthWires the .password-field reveal button (aria-pressed and the label follow) and scores the password from length, variety and common patterns into a four step meter with a live label. Needs monsoon.js.

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.