shadcn.io is not affiliated with official shadcn/ui
Warning Toast Notification Block for Radix UI
A seat management console with one warning toast that follows the count: it appears at 90% of the plan, turns into Seat limit reached at the limit, updates in place as the number moves, and takes itself away when it falls back.
Installation
Overview
Warn before a limit bites, once, with this warning toast for React with Radix UI. It's the seats page of Seatlark, a seat management console, drawn in greys inside a hairline frame with a plus mark on each corner: a top bar and a grid of seats, the taken ones filled. A stepper on the top bar, two outline icon Buttons around a count in words ("9 of 10 seats used."), uses one more seat or one fewer. From 90% of the plan on, a single warning toast says "Seat limit nearly reached" with the count, wearing the look of the catalog's Toast; at the limit the same toast turns into "Seat limit reached", it updates in place as the number moves, and it takes itself away when the count falls back. Its action, Add seats, gives five more seats and the toast goes. The toast is drawn in place on load; the first press of the stepper raises a real one through the block's own toaster, at the end of the screen. It's built from Toast, Button and Guides, with CSS motion only. For quotas, seats, storage and any limit worth a heads-up.
FAQ
Why is the toast already on the page, and what do I keep?
So you can see a warning toast without filling a plan: on load the count is nine of ten and the toast is drawn in place at the stage's foot end, using the catalog toast's own classes, and the stepper and Add seats work on it. The first press of the stepper raises a real toast and the drawn one stays gone until a reload. In your app keep the toaster, raise and sync, and drop the drawn copy: the "in-place" state, DrawnToast and the ol in the frame.
How does one toast follow the count?
createToaster() returns its toast function, a single <Toaster closeButton /> renders the stack, and the block keeps one toast with toast.warning(title, { id, description, action, duration: Infinity }). Calling it again with the same id updates that toast in place, and toast.dismiss(id) takes it away.The block calls sync after every change of the count, so the toast always says what the count says.When does the toast appear, and what changes at the limit?
From 90% of the limit, rounded up: nine of ten, fourteen of fifteen. Below that it is gone; at the limit its title changes from "Seat limit nearly reached" to "Seat limit reached" and nothing else moves. Change WARN_AT for another share. A stepper that is already at the limit is refused in words ("All 10 seats are used. Add seats to invite more.") rather than disabled, so it keeps its place in the tab order.
What does Add seats do?
Here it adds five seats, up to a ceiling of 25, and the toast goes because the count no longer calls for it; the status message says nothing was billed. Only the toast that is up answers, once, because a toaster can deliver an action twice. In your app send the request in addSeats, and raise the success toast from its response.
Is it accessible?
The real toast lives in a live region that speaks it once and never takes focus; because it carries an action, it never times out while the count holds it up. The stepper's buttons are named, the count is written in words, and a polite status message says it when no toast does. The drawn copy is a list named "Notifications" and its Dismiss names the toast. The warning icon is foreground, never a status color.