shadcn.io is an independent project built on shadcn/ui
Show Warning is an outline button. The toast says Your session will expire soon and shows the warning icon. There is no time under it and no action.
Use it for something that is not an error yet, such as a session about to end. If people must stay and act, put an Alert on the page. In React, Base UI themes the warning icon and does not extend the session.
Installation
Anatomy
Usage
<>
<Toaster />
<Button onClick={handleShowToast} variant="outline">
Show Warning
</Button>
</>FAQ
How does this demo show a warning?
The button calls toast.warning with "Your session will expire soon". That sets the type to warning. Toaster draws a TriangleAlertIcon with className="size-4" and aria-hidden.
Which options does this call pass?
Only the message. There is no description, duration, action, or dismissible on this call. The notice is that one sentence.
How do I say when the session expires?
Pass description as the second argument, for the line under the title. This demo keeps the timing inside the title string and does not pass description.
How do I show this as an error instead?
Call toast.error with the message. That swaps in Toaster's OctagonXIcon. This file uses toast.warning, so the icon is the triangle.
API Reference
Sonner
No extra props in this demo. The rest is on the Sonner page.
Button
Sets onClick={handleShowToast} and variant="outline". The rest is on the Button page.
