shadcn.io is not affiliated with official shadcn/ui
Toast Pill Banner Block for React
A saved-settings toast pill for a settings panel: a success check, a message, an Undo button wearing a ring that drains over six seconds, and a dismiss button.
Installation
Overview
A toast pill for React with Base UI, the confirmation that follows a save, with a short window to take it back. An end-aligned capsule sits in a muted shell between the page's rails: a success check, "Workspace settings saved", an outline Undo button wearing a small ring that drains over six seconds, and a ghost dismiss button. The drain holds while the pointer or keyboard focus is inside the pill and never runs under reduced motion. When it ends, the button stays but turns inert and says so. Undo flips the message to "Settings reverted" and the button to Redo, which saves again and refills the ring. A polite status line, present from load, speaks only when something changes. Dismissing folds the whole block away to its top rule and keeps the keyboard where it was. It follows your theme, and the success colour stays on the check. It's built from Guides, Circular Progress and Button.
FAQ
How do I wire Undo to my app?
flip is where the button acts: when it reverts, call your undo (restore the previous settings), and when it saves again, call your save. The ring is only a promise that Undo works for six seconds: set UNDO_MS to however long your server can really take a change back, and disable the button on the server side too, so a late request is refused.
When does the ring stop, and what about reduced motion?
The ring drains in 100 ms steps and holds while the pointer is over the pill and while keyboard focus is inside it (a click that only focuses a button doesn't hold it). It never starts under reduced motion: the ring stays full and Undo never runs out, so nobody is rushed. When it does run out, the button stays in place with aria-disabled (keyboard focus isn't lost) and a polite line says "Undo is no longer available."
What do screen readers hear?
The status line is on the page from the first render and empty, so it announces only changes: "Settings reverted.", "Workspace settings saved." after Redo, and "Undo is no longer available." when the time runs out. The ring is decoration and hidden from assistive technology; the button is named by its word, Undo or Redo. The pill is named "Settings saved".
What happens when someone dismisses it?
The block's rows shrink from their full height to nothing while the pill fades, in 300 ms, and it ends at its top rule. Once folded it is inert and hidden from screen readers, and focus moves to a short visually hidden line, "Settings notice dismissed.", so the next Tab carries on from the same spot. With reduced motion it closes at once.
How do I make it a real toast at the bottom of the screen?
The pill renders in flow so the preview and a stack of blocks can see it. To float it, add fixed inset-x-4 bottom-4 z-50 mx-auto to the pill (the section named "Settings saved") and remove the block's wrapper padding if the pill lives on its own. Render it when a save finishes and remove it when the ring ends or the person dismisses it. Keep room for the home indicator with bottom-[max(1rem,env(safe-area-inset-bottom))].
How does it fit on a phone?
Below sm the pill is a rounded card: the check, the message and the dismiss button on the first row, and a full-width Undo under them. From sm it is one row and a full capsule. The message and the button's two wordings each share one grid cell, so nothing shifts when they change. At 320 pixels nothing scrolls sideways, and in a right-to-left layout it mirrors.
Related
- Pro
A release pill for a knowledge base: a New badge, one sentence about semantic search, a small Try it link and a dismiss button that folds the block away.
- 3Pro
An unsaved-changes pill for a form builder: a rolling count of changes, a small Save button and a ghost Discard, settling on a saved or discarded message.
- Pro
Success Alert Banner
AlertsA success notice for a release pipeline on a faint tinted band: a check icon, a heading, one line, a link to the deployment and 18 slim segments, one per passed check, that fill in once.
- Pro
Saved Draft Top Bar Banner
Utility barsA top bar for a writing tool that reports its autosave with a green dot and a ticking time, and a Restore previous button that swaps in place to Restored with an Undo.
- a1f9c2Pro
A staging pill for a deploy platform: a status dot and the environment's name, the branch and the commit hash in mono, and a copy button for the hash.
- Pro
An install pill for a plant-care app: a greyscale app tile, the name, a row of stars with its score, a small Get link and a dismiss button that folds the block away.