Introduction

Toasts deliver brief notifications to users without interrupting their workflow. They support multiple themes, auto-dismiss, and can be positioned anywhere on screen.

Installation

import { Toast, ToastTitle, ToastDescription, ToastContainer, ToastProvider, useToast } from '@/components/ui/toast';

Usage

<Toast onDismiss={() => {}}>
<ToastTitle>Notification</ToastTitle>
<ToastDescription>Your changes have been saved.</ToastDescription>
</Toast>

Examples

Default

Notification

This is a default toast message.

ToastDefault

import { Toast, ToastTitle, ToastDescription } from '@/components/ui/toast';

export default function Component() {
  return (
    <Toast onDismiss={() => {}}>
      <ToastTitle>Notification</ToastTitle>
      <ToastDescription>This is a default toast message.</ToastDescription>
    </Toast>
  );
}

Themes

Default

A default styled toast message.

Primary

A primary themed toast.

Success

Action completed successfully.

Error

Something went wrong.

Warning

Please review before proceeding.

ToastThemes

import { Toast, ToastTitle, ToastDescription } from '@/components/ui/toast';

export default function Component() {
  return (
    <div className="flex w-full flex-col gap-3">
      <Toast theme="success" onDismiss={() => {}}><ToastTitle>Success</ToastTitle><ToastDescription>Done!</ToastDescription></Toast>
      <Toast theme="danger" onDismiss={() => {}}><ToastTitle>Error</ToastTitle><ToastDescription>Failed.</ToastDescription></Toast>
    </div>
  );
}

Simple

A toast without a title.

Your file has been uploaded.

ToastSimple

import { Toast, ToastDescription } from '@/components/ui/toast';

export default function Component() {
  return <Toast><ToastDescription>Your file has been uploaded.</ToastDescription></Toast>;
}

API Reference

Toast

Prop	Type	Default	Description
`theme`	`default \| primary \| success \| danger \| warning`	`default`	Color theme
`onDismiss`	`() => void`	—	Dismiss callback, shows close button

ToastContainer

Prop	Type	Default	Description
`position`	`top-left \| top-right \| top-center \| bottom-left \| bottom-right \| bottom-center`	`bottom-right`	Screen position

useToast

Hook for programmatic toast management. Returns { toast, dismiss, toasts }.

Toast

On this page