Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sonner examples · Standard

Info Toast Sonner for React

A button that shows an info toast with the info icon.

Framework
UI library

An info toast shares something useful that isn't a success, a warning or an error. The button calls toast.info, and Toaster adds its info icon. Use it for new versions, tips and neutral updates.

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 an info toast?

The button calls toast.info with "New updates are available". That sets the type to info. Toaster draws an InfoIcon with className="size-4" and aria-hidden.

Which options does this call pass?

Only the message. There is no description, action, duration, or custom icon in this file.

How do I add a line under the update message?

Pass description as the second argument to toast.info. It renders under the title. This demo leaves it off.

How do I show the same words with no info icon?

Call toast with the string. A plain call has no type, so Toaster skips the info icon. This file uses toast.info, so the icon is InfoIcon.

How do I add a button that opens the updates?

Pass action with a label and an onClick. The button runs onClick and then closes the toast. This call does not pass action.

Where does the info icon come from?

Toaster sets icons.info to InfoIcon. This call does not pass icon. The demo renders its own Toaster; in an app, render one near the root.

All 24 sonner examples