Alerts, banners and stacked toasts with timed dismissal.
A toast is a message that appears without being asked for and leaves without being dismissed, which makes it the wrong container for anything the user needs. These cover the four states everyone actually ships — info, success, warning, error — with the entrance and the timed exit as CSS rather than as a timer you have to cancel.
Inline alert with a blue accent rail and a tinted background wash.
Solid ocean toast that drops in with a spring and keeps a blinking status dot.
Frosted toast with an ocean bar draining along the bottom to show time until dismiss.
Status pill with a blue dot that emits an expanding ping ring.
Three toasts collapsed into a depth stack with the newest in front — the sonner-style notification pile, in ocean.
Site-wide banner with a blue light sweeping along its top edge — attention without a modal.
Inline announcement with an ocean accent rail, info glyph and a rotating close button.
Field-level message that says what is wrong and what to do about it, keyed by a thick left rule so it scans as attached to the input above.
Confirmation carrying its own reversal, with a timer bar draining by `scaleX` so the countdown animates on the compositor rather than on width.
Background-job notice carrying a spinner, a bar and a numeric read-out, so the same toast covers both indeterminate and measured phases.
Cookie notice giving both choices equal size, since a decline styled as an afterthought is the pattern regulators actually object to.
Confirmation whose tick springs in from its own corner on an overshoot, so the mark lands rather than simply appearing.
Persistent network notice with a pinging indicator and a manual retry, sized as a bar rather than a toast because it does not auto-dismiss.
Failure banner that keeps the stack trace folded behind a disclosure, so the summary stays one line and the detail is one click away rather than a separate screen.
Consent bar in the shape a browser uses for it — origin under the ask, block and allow weighted differently, the whole thing sized to sit under an address bar.
Social notification carrying who, what they said and two ways to respond, sized so the quoted line can wrap without pushing the actions off the card.
Per-category cookie controls rather than one accept button, with the essential row switched on and visibly locked so the choice that is not a choice reads as such.
A warning alert edged with diagonal hazard stripes that scroll and a caution icon that tilts on hover.
A game-style unlock toast with a round trophy badge that wobbles and a shimmer that sweeps across on hover.
A sky-blue app-update toast with a pinging status dot and a restart button that brightens and swells on hover.
A rose error alert built on a details element that expands to reveal a compact stack trace when clicked.
An orange announcement bar with a LIVE tag and an edge-faded marquee message that scrolls continuously and pauses on hover.
A pill toast with an overlapping avatar cluster that fans apart on hover to announce who just joined.
Amber alert carrying its own usage meter, the fill gently throbbing to show how little of the allowance is left.
Showing 24 of 31. Search the rest →
Inboxes, unread badges, grouped feeds and preference panels.
Small confirmations: checks, likes, copies, ripples and nudges.
Disclosure patterns built on details, radios and checkboxes.
Rings, stacks, statuses, frames and hover reveals.
Status pills, counters, chips and label variants.
Bars, sparklines, gauges and heat grids without a chart library.