Featured
NotificationsBasic Toast
A transient, auto-dismissing confirmation announced politely.
#toast#snackbar#transient
6 frameworksIntermediate
Loading…
A polite success toast with an icon, capped width and a real dismiss button.
<!--
Success toast. role="status" (polite) never role="alert" - "Saved" must not cut
a screen-reader user off mid-sentence. Width caps at the viewport with
max-w-[calc(100vw-2rem)] so it can't overflow at 320px, and the check icon
repeats what the green already says - colour is never the sole signal.
-->
<div role="status" aria-live="polite" class="pointer-events-auto flex w-96 max-w-[calc(100vw-2rem)] items-start gap-3 rounded-xl border border-green-200 bg-white px-4 py-3.5 shadow-[0_10px_30px_-10px_rgba(0,0,0,0.35)] dark:border-green-900 dark:bg-gray-900">
<svg class="mt-0.5 h-5 w-5 flex-none text-green-700 dark:text-green-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4Z" />
</svg>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Payment received</p>
<p class="mt-0.5 text-sm leading-normal text-gray-600 dark:text-gray-400">Invoice #2043 has been marked as paid.</p>
</div>
<button type="button" aria-label="Dismiss" class="-mr-1 -mt-1 flex h-7 w-7 flex-none items-center justify-center rounded-md text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400">
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.3 6.3a1 1 0 0 1 1.4 0L10 8.6l2.3-2.3a1 1 0 1 1 1.4 1.4L11.4 10l2.3 2.3a1 1 0 0 1-1.4 1.4L10 11.4l-2.3 2.3a1 1 0 0 1-1.4-1.4L8.6 10 6.3 7.7a1 1 0 0 1 0-1.4Z" />
</svg>
</button>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
message | string | - | Body text of the notification. |
onDismiss | () => void | - | Fired when the user dismisses the notification. |
dismissLabel | string | 'Dismiss' | Accessible name for the dismiss button. |
className | string | - | Additional classes merged onto the root element. |
Keep it role="status", never role="alert" - a confirmation should not interrupt a screen-reader user mid-sentence. The check icon is not decoration; it carries the same meaning the green does, so the toast still reads as success without colour. Width is capped at the viewport so it can never overflow at 320px.