Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Warning Toast Notification Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Warn before a limit bites, once, with this warning toast for React with Base 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?

The block makes its own manager with createToaster() (Base UI's createToastManager), renders <Toaster toaster={toaster} /> once, and keeps one toast with toaster.add({ id, type: "warning", title, description, actionProps, timeout: 0 }). Adding with the same id updates that toast in place, and toaster.close(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.

What stays local?

Everything: the plan's limit, the count and the toast live in the block and reset on reload, and the seat grid is a drawing. Nothing is billed or sent. The numbers are START, STEP and CEILING at the top of the file.

How does it look on a phone?

The seat grid keeps five across, the count stays beside the stepper, and the drawn toast takes the width of the page minus a margin. The real toast is the library's own: full width at the end of the screen.

  • Pro

    Error Toast Notification

    Toasts

    A payments dashboard's charge page with a declined card: an error toast that never times out, a Retry that counts the attempts until the third turns it into Contact support, and the request id with a Copy button.

  • Pro

    Success Toast Notification

    Toasts

    The settings page of a form builder with its Save settings button: two success toasts are drawn on the page, and pressing Save raises a real toast through the block's own toaster, stacking up to three.

  • Pro

    Storage Quota Exceeded Notification

    A cloud storage service's over-the-limit notice with a bar that overshoots a marked limit and a slider that works out the new limit, the monthly cost and whether the usage then fits.

  • Pro

    Storage Almost Full Notification

    A cloud drive's almost-full warning: a stacked bar of space by file type, a toggle group that lists each type's five biggest files as checkboxes, and a confirmed delete that shows how much it frees.

  • Pro

    Alert Banner Notification

    Incidents and alerts

    An operations console's banner bar over a sketch of its app: four notices queue by urgency and show one at a time, with Previous, Next, a link, Dismiss and Snooze all for an hour.

  • Pro

    Seat Management Billing

    Plan and usage

    Seats on a team plan: members with a role each (viewers are free), a stepper for the seats you pay for, and the monthly and prorated cost worked out before you save.

All 100 notification blocks