Toast

A succinct message that is displayed temporarily. Built on top of Radix UI Toast primitive.

Installation

npm install @darksnow-ui/toast

Peer Dependencies

npm install react react-dom

Usage

import { useToast } from "@darksnow-ui/toast"
import { Button } from "@darksnow-ui/button"

export function ToastExample() {
  const { toast } = useToast()

  return (
    <Button
      onClick={() => {
        toast({
          title: "Scheduled: Catch up ",
          description: "Friday, February 10, 2023 at 5:57 PM",
        })
      }}
    >
      Add to calendar
    </Button>
  )
}

Hook

useToast

Provides toast functionality.

const { toast, dismiss } = useToast()

// Show toast
toast({
  title: "Success!",
  description: "Your changes have been saved.",
})

// Dismiss toast
dismiss(toastId)

Toast Options

| Option | Type | Default | Description | |-------------|-----------------------------------|---------|--------------------------------| | title | string | - | Toast title | | description | string | - | Toast description | | variant | "default" | "destructive" | "default" | Toast variant | | action | ToastActionElement | - | Action button | | duration | number | 5000 | Auto-dismiss duration (ms) |

Examples

Basic Toast

toast({
  title: "Success!",
  description: "Operation completed successfully.",
})

Error Toast

toast({
  variant: "destructive",
  title: "Uh oh! Something went wrong.",
  description: "There was a problem with your request.",
})

Toast with Action

toast({
  title: "Scheduled: Catch up",
  description: "Friday, February 10, 2023 at 5:57 PM",
  action: (
    <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
  ),
})

Custom Duration

toast({
  title: "Auto-save enabled",
  description: "Your work is being saved automatically.",
  duration: 10000, // 10 seconds
})

Setup

Add the Toaster component to your app:

import { Toaster } from "@darksnow-ui/toast"

function App() {
  return (
    <div>
      {/* Your app content */}
      <Toaster />
    </div>
  )
}

Accessibility

• Screen reader announcements
• Keyboard navigation support
• Focus management
• Proper ARIA attributes

Styling

Uses DarkSnow UI design tokens for consistent theming.

Related Components

• Alert - Static notifications
• Toaster - Toast container