Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sonner examples · Standard

Warning Toast Sonner for React

A button that shows a warning toast with the warning icon.

Framework
UI library

A warning toast flags something that isn't an error yet but needs attention soon. The button calls toast.warning, and Toaster adds its warning icon. Use it for an expiring session, a nearly full quota or unsaved changes.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

How long does this warning stay?

This call does not pass duration. It uses duration on Toaster, or 4 seconds when that is omitted too. Pass duration on the call to keep this one notice up longer.

Does the demo render the toaster?

Yes. The demo renders its own Toaster beside the button, so it works on its own; its icons.warning holds the triangle. In an app, render one Toaster near the root.

All 24 sonner examples