shadcn.io is not affiliated with official shadcn/ui

Components

Free

Toast for React

Q: How do I show a toast in React?

Render the Toaster once near the root of your app, then call the toaster from any event handler. Import toast and call toast.add with a title and a description, as the default demo does.

Q: How do I show a loading toast that updates when a request finishes?

Use toast.promise with the promise and a loading, a success and an error message, as the Promise demo does. The same toast shows the loading state, then the result once the promise settles.

Confirm that an action just worked, then go away on its own, with undo if it can be reversed. For React with Base UI, the notice does not take focus.

A small notice with a title, a short detail, and an optional undo button. It leaves on its own.

Use a toast for the result of an action people just took. An Alert stays in the layout when they have to deal with the message before continuing. In React, Base UI announces the notice in a live region and does not move focus.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

ToastItem
├── ToastGroup
├── ToastTitle
├── ToastDescription
├── ToastActionTrigger
└── ToastCloseTrigger

Usage

import { Button } from "@/components/ui/button";
import { Toaster, toast } from "@/components/ui/toast";

const ToastDemo = () => {
  const handleShowToast = () => {
    const id = toast.add({
      actionProps: {
        children: "Undo",
        onClick() {
          toast.close(id);
        },
      },
      description: "Sunday, December 3 at 9:00 AM",
      title: "Event created",
    });
  };

  return (
    <>
      <Toaster />
      <Button onClick={handleShowToast} variant="outline">
        Show Toast
      </Button>
    </>
  );
};

Accessibility

Enter: Activate the focused control.
Space: Activate the focused control.

Demos

Types

Five buttons fire five notices: a plain one, then success, info, warning, and error. The typed ones carry a status icon and a color, and the sentence is the whole message. Use a type when the outcome is not neutral, so a glance tells success from failure. Do not rely on the color alone, because the words still have to say what happened.

PreviewCode

Promise

Create Event starts a notice that says it is creating the event, waits two seconds, then updates that same notice to say the event was created. The error copy is there for when the promise rejects, though this request always resolves. Use a promise toast for a request the person is waiting on. A static success toast is enough when you already know the result.

PreviewCode

FAQ

How do I show a toast in React?

Render the Toaster once near the root of your app, then call the toaster from any event handler. Import toast and call toast.add with a title and a description, as the default demo does.

How do I show a success or error toast with Base UI?

Each type gets its own icon and color; the Types demo shows them all. Pass type to toast.add: success, error, warning, info or loading.

How do I show a loading toast that updates when a request finishes?

Use toast.promise with the promise and a loading, a success and an error message, as the Promise demo does. The same toast shows the loading state, then the result once the promise settles.

How do I close a toast from code?

Keep the id the call returns and close that toast with it, for example from an Undo button in its action. Call toast.close with the id.

How do I change where toasts appear?

The viewport's position is set by classes in the Toast file in your ui folder; edit them to move it.

Are toasts accessible to screen readers?

Yes. Toasts are announced through a live region without taking focus, so the page keeps working. Keep the title short, and do not put the only way to do something in a toast that disappears on its own.

Should I use Toast or Sonner?

Use Toast for toasts built on your project's primitives, on every framework. Use Sonner on React for the quickest setup, a single toast() call with nothing to configure.

How do I install the Toast component in React?

Run the command in the Installation section above: it adds the Toast to your ui folder. Then render its Toaster once in your layout. The command uses the shadcn CLI.

API Reference

Toast

<div> data-slot="toast"

PropType

toastToastRootToastObject<any>

The toast to render.

Type: ToastRootToastObject<any>

Direction(s) in which the toast can be swiped to dismiss.

Type: "up" | "down" | "left" | "right" | ("up" | "down" | "left" | "right")[]
Default: ['down', 'right']

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-align"start" | "center" | "end"

How the content aligns to its trigger.

Type: "start" | "center" | "end"

data-first?string

Present when frontmost is true.

data-mounted?string

Present when mounted is true.

data-overlap?string

Present when stacked is false.

data-paused?string

Present when paused is true.

data-placementstring

The content's placement on its trigger, such as bottom-start.

data-sibling?string

Present when frontmost is false.

data-side"top" | "right" | "bottom" | "left"

The side of the trigger the content sits on.

Type: "top" | "right" | "bottom" | "left"

data-stack?string

Present when stacked is true.

data-state"open" | "closed"

"open" or "closed".

Type: "open" | "closed"

data-typestring

Mirrors type.

CSS variableType

--gapstring

--heightstring

The measured height, for animating open and closed.

--offset-ystring

--peekstring

--scalestring

--shrinkstring

--toast-heightstring

--toast-indexstring

--toast-offset-ystring

--toast-swipe-movement-xstring

--toast-swipe-movement-ystring

ToastTitle

<h2> data-slot="toast-title"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

ToastDescription

<p> data-slot="toast-description"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

ToastPortal

<div> data-slot="toast-portal"

PropType

A parent element to render the portal element into.

Type: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

ToastViewport

<div> data-slot="toast-viewport"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

ToastContent

<div> data-slot="toast-content"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

ToastAction

<button> data-slot="toast-action-trigger"

PropType

nativeButton?boolean

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Default: true

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)
Default: <Button size="sm" variant="outline" />

className?string

Merged with the part's classes.

ToastClose

<button> data-slot="toast-close-trigger"

PropType

nativeButton?boolean

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Default: true

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)
Default: <Button size="icon-sm" variant="ghost" />

className?string

Merged with the part's classes.

ToastActionTrigger

PropType

nativeButton?boolean

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Default: true

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-align"start" | "center" | "end"

How the content aligns to its trigger.

Type: "start" | "center" | "end"

data-first?string

Present when frontmost is true.

data-mounted?string

Present when mounted is true.

data-overlap?string

Present when stacked is false.

data-paused?string

Present when paused is true.

data-placementstring

The content's placement on its trigger, such as bottom-start.

data-sibling?string

Present when frontmost is false.

data-side"top" | "right" | "bottom" | "left"

The side of the trigger the content sits on.

Type: "top" | "right" | "bottom" | "left"

data-stack?string

Present when stacked is true.

data-state"open" | "closed"

"open" or "closed".

Type: "open" | "closed"

data-typestring

Mirrors type.

ToastCloseTrigger

PropType

nativeButton?boolean

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Default: true

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-align"start" | "center" | "end"

How the content aligns to its trigger.

Type: "start" | "center" | "end"

data-first?string

Present when frontmost is true.

data-mounted?string

Present when mounted is true.

data-overlap?string

Present when stacked is false.

data-paused?string

Present when paused is true.

data-placementstring

The content's placement on its trigger, such as bottom-start.

data-sibling?string

Present when frontmost is false.

data-side"top" | "right" | "bottom" | "left"

The side of the trigger the content sits on.

Type: "top" | "right" | "bottom" | "left"

data-stack?string

Present when stacked is true.

data-state"open" | "closed"

"open" or "closed".

Type: "open" | "closed"

data-typestring

Mirrors type.

ToastIcon

<span> data-slot="toast-icon"

PropType

type?string

The toast's type, which picks the icon: success, error, warning, info or loading.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

ToastItem

PropType

toastToastPrimitive.Root.Props["toast"]

The toast it renders, from the toast manager.

Type: ToastPrimitive.Root.Props["toast"]

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-align"start" | "center" | "end"

How the content aligns to its trigger.

Type: "start" | "center" | "end"

data-first?string

Present when frontmost is true.

data-mounted?string

Present when mounted is true.

data-overlap?string

Present when stacked is false.

data-paused?string

Present when paused is true.

data-placementstring

The content's placement on its trigger, such as bottom-start.

data-sibling?string

Present when frontmost is false.

data-side"top" | "right" | "bottom" | "left"

The side of the trigger the content sits on.

Type: "top" | "right" | "bottom" | "left"

data-stack?string

Present when stacked is true.

data-state"open" | "closed"

"open" or "closed".

Type: "open" | "closed"

data-typestring

Mirrors type.

Toaster

PropType

toaster?ToastPrimitive.Provider.Props["toastManager"]

The toast manager it shows, the same as toastManager: the shared toast when unset.

Type: ToastPrimitive.Provider.Props["toastManager"]

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-align"start" | "center" | "end"

How the content aligns to its trigger.

Type: "start" | "center" | "end"

data-first?string

Present when frontmost is true.

data-mounted?string

Present when mounted is true.

data-overlap?string

Present when stacked is false.

data-paused?string

Present when paused is true.

data-placementstring

The content's placement on its trigger, such as bottom-start.

data-sibling?string

Present when frontmost is false.

data-side"top" | "right" | "bottom" | "left"

The side of the trigger the content sits on.

Type: "top" | "right" | "bottom" | "left"

data-stack?string

Present when stacked is true.

data-state"open" | "closed"

"open" or "closed".

Type: "open" | "closed"

data-typestring

Mirrors type.

ToastProvider

PropType

limit?number

The maximum number of toasts that can be displayed at once. When the limit is exceeded, the oldest toasts are marked as limited (via the data-limited attribute) rather than removed, so they can be hidden or animated out.

Default: 3

timeout?number

The default amount of time (in ms) before a toast is auto dismissed. A value of 0 will prevent the toast from being dismissed automatically.

Default: 5000

toastManager?object

A global manager for toasts to use outside of a React component.

Type: { listener: (data: ToastManagerEvent) → void) → () → void; add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) → string; close: (id?: string) → void; update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T> | ((prevToast: ToastObject<T>) → ToastManagerUpdateOptions<T>)) → void; promise: <Value, T extends Data = Data>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) → Promise<Value> }

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

useToast

With other components

Free
Button
Buttons
The trigger
Free
Alert
Feedback
Stays on the page
Free
Sonner
Feedback
The other toast API
Free
Spinner
Feedback
Loading type
Free
Dialog
Overlays
They have to answer
Free
Alert Dialog
Overlays
Confirm a delete

Free
Item
Layout
A row, not a popup
Free
Announcement
Feedback
Stays in the page
Free
Hint
Feedback
A quiet note
Free
Status
Feedback
A lasting state
Free
Empty
Feedback
Nothing happened yet
Free
Progress
Feedback
The work is still going

All 105 components

Installation

Anatomy

Usage

Accessibility

Demos

Types

Promise

FAQ

How do I show a toast in React?

How do I show a success or error toast with Base UI?

How do I show a loading toast that updates when a request finishes?

How do I close a toast from code?

How do I change where toasts appear?

Are toasts accessible to screen readers?

Should I use Toast or Sonner?

How do I install the Toast component in React?

API Reference

Toast

ToastTitle

ToastDescription

ToastPortal

ToastViewport

ToastContent

ToastAction

ToastClose

ToastActionTrigger

ToastCloseTrigger

ToastIcon

ToastItem

Toaster

ToastProvider

useToast

With other components

Related