Featured
NotificationsBasic Toast
A transient, auto-dismissing confirmation announced politely.
#toast#snackbar#transient
6 frameworksIntermediate
Loading…
A dismissible announcement banner on a gradient, with an icon and CTA.
<!--
Announcement banner on a gradient. This is a marketing message, not a transient
event, so it carries no live region - it's here on load, not pushed at you. Text
is solid white on a saturated indigo->violet fill (well past AA), and an icon
sits alongside so the meaning survives without colour. It stacks (flex-col) at
320px and lays out as a row once there's room; the close is a real <button>.
-->
<div class="relative flex flex-col gap-3 overflow-hidden rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 p-4 text-white sm:flex-row sm:items-center sm:gap-4">
<span class="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-white/15">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10 2a5 5 0 0 0-5 5v3.6l-1.3 2.6A1 1 0 0 0 4.6 15h10.8a1 1 0 0 0 .9-1.8L15 10.6V7a5 5 0 0 0-5-5Zm0 16a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 10 18Z" /></svg>
</span>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold">Realtime alerts are live</p>
<p class="mt-0.5 text-sm text-white/90">Get pinged the moment a deploy finishes or fails.</p>
</div>
<button type="button" class="flex-none rounded-lg bg-white px-3.5 py-2 text-sm font-semibold text-indigo-700 transition hover:bg-indigo-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-indigo-600 motion-reduce:transition-none">Explore</button>
<button type="button" aria-label="Dismiss" class="absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-md text-white/80 transition hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white motion-reduce:transition-none sm:static">
<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. |
ctaLabel | string | - | Call-to-action button text. |
onClick | () => void | - | Fired when the user activates the control. |
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. |
This is a marketing message, not a pushed event, so it carries no live region. Text is solid white on a saturated fill for AA contrast and an icon sits alongside so the meaning survives without colour. It stacks at 320px and becomes a row once there is space.