Notifications

Notifications surface timely feedback—successes, warnings, errors, and neutral updates—without derailing the current task. Keep them short, scannable, and dismissible so they inform rather than interrupt.

Tailor the tone to the message: confirm completed actions, warn about risks, or highlight required follow-up. Ensure keyboard users can reach controls, and place notifications near the action that triggered them when context matters.

Regular notifications sit inline with surrounding content or at the top of a region to deliver status. Use them sparingly so each message feels relevant, and favor concise copy that states what happened and what to do next.

Accessibility: announce important alerts via polite or assertive ARIA live regions (aria-live="polite|assertive") and give every notification a clear role. Provide enough color contrast and avoid relying on color alone to convey meaning.

<div class="notification"></div>

Closable notifications give users agency to clear messages that linger after they are read. Position the close control consistently (top-right), make it keyboard-focusable, and preserve padding so text doesn’t jump when the icon is present.

Close control tips: make it a <button>, so it works with the keyboard, and give it a name with aria-label, because it only shows an icon; ensure focus returns to a logical element after dismissal, and consider auto-dismiss for low-severity messages with enough dwell time to be read.

<div class="notification">
  ...
  <button type="button" class="control close" aria-label="Dismiss"><svg>...</svg></button>
</div>

Iconified notifications pair a glyph with copy to convey severity at a glance—warnings, info, success. Keep icon styles consistent with your typography, and ensure they don’t overpower the headline or body text.

<div class="notification">
  <svg class="icon">...</svg>
  ...
</div>

Color-coded notifications lean on the Catppuccin palette to reinforce meaning: warm tones for warnings, cool for info, and greens for success. Maintain readable contrast and reserve saturated hues for higher-severity messages.

Color guidance: align hues with severity consistently and provide a text label for the state. Review contrast ratios for icons and text against backgrounds, and see the Catppuccin palette for the full range.

<div class="notification rosewater">...</div>
<div class="notification flamingo">...</div>
<div class="notification pink">...</div>
<div class="notification mauve">...</div>
<div class="notification red">...</div>
<div class="notification maroon">...</div>
<div class="notification peach">...</div>
<div class="notification yellow">...</div>
<div class="notification green">...</div>
<div class="notification teal">...</div>
<div class="notification sky">...</div>
<div class="notification sapphire">...</div>
<div class="notification blue">...</div>
<div class="notification lavender">...</div>
<div class="notification gray">...</div>

E-ink: in the e-ink theme every notification is black with white text, whatever its color class. The icon and the words have to tell what kind of message it is.

Sticky notifications remain on screen until explicitly dismissed, useful for critical alerts or messages that require acknowledgment. Anchor them near related content or at the top of a container, and avoid covering essential controls.

<div class="notification sticky"></div>