Toaster

Shows brief, non-intrusive notifications to inform users of actions, errors, or system feedback.

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Toaster

Usage

import { Button } from "@/registry/default/displayui/Button"
import { Toaster } from "@/registry/default/displayui/Toaster"

<Toaster.Main>
  <Toaster.Trigger
    message="Profile updated successfully!"
    toastType="info"
    position="top-right"
  >
    <Button variant="solid" size="sm" className="bg-blue-500 hover:bg-blue-600">
      Primary
    </Button>
  </Toaster.Trigger>
</Toaster.Main>

API

Separator Props

For Toaster Main

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Wraps the application and provides toast context. Required for using Toaster.Trigger or useToast hook.	-

For Toaster Trigger

Attribute	Type	Description	Default
children	`ReactNode`	Content rendered inside the trigger button.	-
message	`string`	Message text displayed inside the toast notification.	-
toastType	`"success" \| "error" \| "info" \| "warning"`	Controls the visual style and icon of the toast.	"info"
position	`"top-right" \| "top-left" \| "bottom-right" \| "bottom-left"`	Defines where the toast appears on the screen.	"top-right"
duration	`number`	Time in milliseconds before the toast automatically disappears.	3000
className	`string`	Additional CSS classes to customize the trigger button styling.	-

Installation

Usage

API

Separator Props

Examples

Default

Warning

Success

Danger

Credits

On this page