Toast

Toasts are lightweight notifications that appear temporarily to provide feedback about an action or system event. Built on top of Sonner for animations and positioning, all toasts render using the Alert component for consistent styling.

Basic Usage

First, add the Toaster component to your app's root layout. Then use the toast function to trigger notifications.

// In your layout or app root
import { Toaster } from '@/components'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

// Anywhere in your app
import { toast } from '@/components'

toast('Hello!')
toast.success('Saved!', { description: 'Your changes have been saved.' })
toast.error('Error', { description: 'Something went wrong.' })

Interactive Demo

Click the buttons below to see different toast types:

Status Types

Toasts support five status types, each with a unique icon.

Success

Success!

Your changes have been saved.

toast.success('Success!', { description: 'Your changes have been saved.' })

Error

Something went wrong.

toast.error('Error', { description: 'Something went wrong.' })

Warning

Please review before continuing.

toast.warning('Warning', { description: 'Please review before continuing.' })

Info

Here is some useful information.

toast.info('Info', { description: 'Here is some useful information.' })

Default

Notification

You have a new message.

toast('Notification', { description: 'You have a new message.' })

Variants

Toasts support four visual variants. Each variant can be combined with any status type.

Fill Variant

Solid colored background with white text.

Success

Success with fill variant

Error

Error with fill variant

Warning

Warning with fill variant

Info

Info with fill variant

Default

Default with fill variant

toast.success('Success', { variant: 'fill', description: 'Success with fill variant' })
toast.error('Error', { variant: 'fill', description: 'Error with fill variant' })
toast.warning('Warning', { variant: 'fill', description: 'Warning with fill variant' })
toast.info('Info', { variant: 'fill', description: 'Info with fill variant' })
toast('Default', { variant: 'fill', description: 'Default with fill variant' })

Light Variant

Muted background with dark text and colored icon.

Success

Success with light variant

Error

Error with light variant

Warning

Warning with light variant

Info

Info with light variant

Default

Default with light variant

toast.success('Success', { variant: 'light', description: 'Success with light variant' })
toast.error('Error', { variant: 'light', description: 'Error with light variant' })
toast.warning('Warning', { variant: 'light', description: 'Warning with light variant' })
toast.info('Info', { variant: 'light', description: 'Info with light variant' })
toast('Default', { variant: 'light', description: 'Default with light variant' })

Stroke Variant (Default)

White background with a subtle border. This is the default variant for toasts.

Success

Success with stroke variant

Error

Error with stroke variant

Warning

Warning with stroke variant

Info

Info with stroke variant

Default

Default with stroke variant

toast.success('Success', { variant: 'stroke', description: 'Success with stroke variant' })
toast.error('Error', { variant: 'stroke', description: 'Error with stroke variant' })
toast.warning('Warning', { variant: 'stroke', description: 'Warning with stroke variant' })
toast.info('Info', { variant: 'stroke', description: 'Info with stroke variant' })
toast('Default', { variant: 'stroke', description: 'Default with stroke variant' })

Dark Variant

Dark background with white text.

Success

Success with dark variant

Error

Error with dark variant

Warning

Warning with dark variant

Info

Info with dark variant

Default

Default with dark variant

toast.success('Success', { variant: 'dark', description: 'Success with dark variant' })
toast.error('Error', { variant: 'dark', description: 'Error with dark variant' })
toast.warning('Warning', { variant: 'dark', description: 'Warning with dark variant' })
toast.info('Info', { variant: 'dark', description: 'Info with dark variant' })
toast('Default', { variant: 'dark', description: 'Default with dark variant' })

Sizes

Toasts are available in three sizes.

Small

Compact single-line toast.

Small toast message

toast('Small toast', { size: 'sm' })

Medium

Standard single-line toast.

Medium toast message

toast('Medium toast', { size: 'md' })

Large (Default)

Large toast with title, description, and action support.

Large Toast

Large toast with title and description.

toast('Large Toast', { size: 'lg', description: 'Large toast with title and description.' })

With Action Button

Add an action button to let users respond to the notification:

Event has been created

Monday, January 3rd at 6:00pm

toast('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm',
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo clicked')
  }
})

With Two Actions

Large toasts can have both primary and secondary actions.

New feature available

We've added a new dashboard feature that helps you track your metrics in real-time.

Payment failed

We couldn't process your payment. Please check your card details and try again.

toast.info('New feature available', {
  variant: 'fill',
  description: 'We\'ve added a new dashboard feature.',
  action: { label: 'Try it now', onClick: handleTry },
  secondaryAction: { label: 'Learn more', onClick: handleLearnMore }
})

Promise Toast

Automatically show loading, success, and error states for async operations:

toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Data saved successfully!',
  error: 'Failed to save data'
})

Positions

Toasts can appear in different positions on the screen:

// Per-toast position
toast('Message', { position: 'top-right' })

// Or set default position on Toaster
<Toaster position="top-center" />

Duration & Dismissing

// Custom duration (in milliseconds)
toast('Quick message', { duration: 2000 })

// Persistent toast (must be dismissed manually)
toast('Important message', { duration: Infinity })

// Dismiss a specific toast
const toastId = toast('Loading...')
toast.dismiss(toastId)

// Dismiss all toasts
toast.dismiss()

API Reference

Toaster Props

Prop	Type	Default	Description
position	`"top-left"` \| `"top-center"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-center"` \| `"bottom-right"`	`"bottom-right"`	Default position for toasts
expand	`boolean`	`false`	Expand toasts by default
closeButton	`boolean`	`false`	Show close button on all toasts
duration	`number`	`4000`	Default duration in milliseconds
toastOptions	`object`	-	Default options for all toasts

toast() Options

Option	Type	Default	Description
variant	`"fill"` \| `"light"` \| `"stroke"` \| `"dark"`	`"stroke"`	Visual style variant
status	`"error"` \| `"info"` \| `"success"` \| `"warning"` \| `"default"`	`"default"`	Status type (set automatically by toast.success, etc.)
size	`"sm"` \| `"md"` \| `"lg"`	`"lg"`	Size of the toast
description	`string`	-	Secondary text below the title
duration	`number`	`4000`	Time in ms before auto-dismiss
position	`string`	-	Override position for this toast
action	`{ label, onClick }`	-	Primary action button
secondaryAction	`{ label, onClick }`	-	Secondary action button

toast Methods

Method	Description
`toast(title, options?)`	Show a default toast
`toast.success(title, options?)`	Show a success toast
`toast.error(title, options?)`	Show an error toast
`toast.warning(title, options?)`	Show a warning toast
`toast.info(title, options?)`	Show an info toast
`toast.promise(promise, opts)`	Show loading/success/error states
`toast.dismiss(id?)`	Dismiss specific or all toasts
`toast.custom(component)`	Render a custom component