Creative Tim UICreative Tim UI

Shadcn Sonner / Toast

PreviousNext

A toast notification component built on Sonner that provides beautiful, accessible toast notifications with support for different variants, actions, and custom styling.

"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export function SonnerInfo() {
  return (
    <Button
      onClick={() => {
        toast.info("Information Notification", {
          description:
            "You can use this to inform users about important updates, changes, or general information.",
        })
      }}
    >
      Show Info Toast
    </Button>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add sonner

Usage

import { toast } from "sonner"
import { Toaster } from "@/components/ui/sonner"
<Toaster />
 
<Button onClick={() => toast("Hello World")}>
  Show Toast
</Button>

Examples

Info Toast

An info toast notification that displays informational messages to users, perfect for providing context or additional details about an action or status.

"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export function SonnerInfo() {
  return (
    <Button
      onClick={() => {
        toast.info("Information Notification", {
          description:
            "You can use this to inform users about important updates, changes, or general information.",
        })
      }}
    >
      Show Info Toast
    </Button>
  )
}

Success Toast

A success toast notification that confirms successful operations, ideal for providing positive feedback when actions complete successfully.

"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export function SonnerSuccess() {
  return (
    <Button
      onClick={() => {
        toast.success("Operation Completed Successfully!", {
          description:
            "Your changes have been saved and all data has been updated in the system.",
        })
      }}
    >
      Show Success Toast
    </Button>
  )
}

Warning Toast

A warning toast notification that alerts users to potential issues or important considerations, useful for drawing attention to actions that may have unintended consequences.

"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export function SonnerWarning() {
  return (
    <Button
      onClick={() => {
        toast.warning("Warning: Please Review This Action", {
          description:
            "This action may have unintended consequences or could affect other parts of the system.",
        })
      }}
    >
      Show Warning Toast
    </Button>
  )
}

Error Toast

An error toast notification that displays error messages when operations fail, essential for providing clear feedback about what went wrong.

"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export function SonnerError() {
  return (
    <Button
      onClick={() => {
        toast.error("An Error Occurred", {
          description:
            "The system encountered an unexpected issue while processing your request. Please try again.",
        })
      }}
    >
      Show Error Toast
    </Button>
  )
}

Actionable Toast

A toast notification with an action button that allows users to perform additional actions directly from the toast, perfect for undo operations or quick follow-up actions.

"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export function SonnerActionable() {
  return (
    <Button
      onClick={() => {
        toast("Changes Applied", {
          description:
            "We’ve applied your changes right away so you can keep moving forward without interruption.",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }}
    >
      Show Actionable Toast
    </Button>
  )
}

Props

The sonner toast component accepts the following props:

Toaster Component

PropTypeDefaultDescription
theme"light" | "dark" | "system""system"The theme for the toast notifications
classNamestring-Additional CSS classes to apply to the toaster
position"top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center""bottom-right"Position of the toast notifications

Toast Function

The toast() function accepts the following options:

PropTypeDefaultDescription
messagestring-The main message to display in the toast
descriptionstring-Optional description text below the message
action{ label: string, onClick: () => void }-Optional action button configuration
durationnumber4000Duration in milliseconds before auto-dismiss
onDismiss() => void-Callback function when toast is dismissed

Best Practices

  • Use appropriate toast types (info, success, warning, error) to match the message context
  • Keep toast messages concise and actionable
  • Use descriptions to provide additional context when needed
  • Implement actionable toasts for operations that can be undone
  • Position toasts in a non-intrusive location (typically bottom-right)
  • Set appropriate durations based on message importance
  • Avoid showing too many toasts simultaneously
  • Use success toasts to confirm user actions
  • Use error toasts to clearly communicate what went wrong
  • Consider accessibility by ensuring toast messages are screen reader friendly

The sonner component provides a smooth, animated toast notification system that enhances user experience by providing timely feedback. It's ideal for form submissions, API responses, system notifications, and any interface where user feedback is important.