Toast

A succinct message that is displayed temporarily.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/toast

Anatomy

import { toast } from "sonner";

toast("Hello, World!", {
  description: "This is a toast message.",
});

Examples

With Description

Preview

Code

Status

Preview

Code

Promise

Preview

Code

Custom

Preview

Code

API Reference

Toaster

The Toaster component should be placed once in your app's root layout or providers.

Prop	Type	Default
`position`	`enum`	`"bottom-right"`
`expand`	`boolean`	`false`
`duration`	`number`	`4000`
`visibleToasts`	`number`	`3`
`closeButton`	`boolean`	`false`
`richColors`	`boolean`	`false`
`theme`	`enum`	`"system"`
`offset`	`string \| number`
`dir`	`enum`	`"ltr"`

toast()

The toast() function is used to create toasts programmatically.

Prop	Type	Default
`message`	`string \| ReactNode`
`description`	`string \| ReactNode`
`duration`	`number`
`icon`	`ReactNode`
`action`	`object`
`cancel`	`object`
`onDismiss`	`function`
`onAutoClose`	`function`

Toast Types

import { toast } from "sonner";

// Default
toast("Default toast");

// Success
toast.success("Success toast");

// Error
toast.error("Error toast");

// Warning
toast.warning("Warning toast");

// Info
toast.info("Info toast");

// Loading
toast.loading("Loading...");

// Promise
toast.promise(promise, {
  loading: "Loading...",
  success: "Success!",
  error: "Error!",
});

// Custom
toast.custom((t) => <CustomToast id={t} />);

TextField Toggle Group

On This Page

Installation
Anatomy
Examples
With Description
Status
Promise
Custom
API Reference
Toaster
toast()
Toast Types

Contribute