Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Notification

A notification card with an icon or avatar, message, meta line, actions and an unread marker.

Actions and feedback8 classesNo JavaScriptLight and dark

Example

Full

Classes

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

:is(.dismissible, .alert, .callout, .banner, .toast-item, .notification, .chip, .tag):has(> .dismiss:not([open])) {
  display: none;
}
Part Part of the notification. On a <div> in the example. Sets grid display, alignment, width, height, overflow and corner radius.
CSS
.notification-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: var(--m-radius-full);
  background-color: color-mix(in oklab, var(--tone-tint) 13%, var(--surface));
  color: var(--tone-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

:where(.notification-icon > svg) {
  width: 1.25rem;
  height: 1.25rem;
}
Part Part of the notification. On a <div> in the example. Sets alignment and width.
CSS
.notification-content {
  flex: 1;
  min-width: 0;
}
Part Part of the notification. On a <p> in the example. Sets text color, font weight and text style.
CSS
.notification-title {
  color: var(--foreground);
  font-weight: 600;
  line-height: 1.4;
}
Part Part of the notification. On a <p> in the example. Sets margin, text color and text style.
CSS
.notification-body {
  margin-top: 0.125rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}
Part Part of the notification. On a <p> in the example. Sets flex display, alignment, gap, margin, text color and text size.
CSS
.notification-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
}
Part Part of the notification. On a <div> in the example. Sets flex display, alignment, gap and margin.
CSS
.notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
Modifier Modifier, combined with the notification class. On a <div> in the example. Sets border, background, generated content, absolute position, offsets and width.
CSS
.notification-unread {
  border-color: color-mix(in oklab, var(--tone-tint) 28%, var(--border));
  background-color: color-mix(in oklab, var(--tone-tint) 4%, var(--surface));
}

.notification-unread::before {
  content: "";
  position: absolute;
  top: 2.0625rem;
  inset-inline-start: 0.375rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--m-radius-full);
  background-color: var(--tone);
}

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

<!-- Notification: start from the base class, then add modifiers -->
<div class="space-y-3 max-w-md">
  <div class="notification notification-unread">
    <div class="notification-icon">AL</div>
    <div class="notification-content">
      <p class="notification-title">Ada Lovelace invited you to Analytics</p>
      <p class="notification-body">Join the workspace to view shared dashboards.</p>
      <div class="notification-actions">
        <button class="btn btn-sm">Accept</button>
        <button class="btn btn-sm btn-ghost btn-neutral">Decline</button>
      </div>
      <p class="notification-meta"><span>2 min ago</span><span class="status status-xs"></span><span>Workspace</span></p>
    </div>
  </div>
  <div class="notification">
<!-- 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".
  • 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 feedbackStatusA small status dot for presence and health, with an optional ping animation.Actions and feedbackEmpty stateA friendly placeholder for empty lists and search results, with an icon, text and actions.Actions and feedbackButtonButtons in eight tones, seven styles and five sizes, with loading, active and disabled states and a visible focus ring.Actions and feedbackButton shapesSquare, circle, pill, full width and wide buttons, plus a quiet icon only button.

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.