Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Info Toast Sonner for React

A Show Info button that opens New updates are available with the info icon, and with no description and no action.

Show Info is an outline button. The toast says New updates are available and shows the info icon. There is no description and no button inside the toast.

Use it for a tip or a new version, not for a success or a failure. If people should read it and keep it, use an Alert. In React, Base UI themes the toaster and does not add a next step.

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

Anatomy

Sonner anatomy: toaster, toast, title, description, action

Usage

<>
  <Toaster />
  <Button onClick={handleShowToast} variant="outline">
    Show Info
  </Button>
</>

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.

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.

All 24 sonner examples