Toast

A toast notification that displays a brief message to the user, typically used for feedback or alerts.

Basic

Different toast types are available for various feedback scenarios.

import { Toaster, toast } from "@epilot/volt-ui"

// Add Toaster to your app root
<Toaster />

// Success toast
toast.success("Successfully saved!")

// Info toast
toast.info("Did you know?")

// Warning toast
toast.warning("Please review your changes")

// Error toast
toast.error("Something went wrong")

Toast with Action

Add an action button to the toast for user interaction.

toast("Event deleted", {
  action: {
    label: "Undo",
    onClick: () => console.log("Undo clicked")
  }
})

Promise Toast

Show loading, success, and error states for async operations.

const promise = fetchData()

toast.promise(promise, {
  loading: "Loading...",
  success: "Data loaded successfully!",
  error: "Failed to load data"
})

Theme

The toast can be styled with light or dark themes.

// Light theme (default)
<Toaster theme="light" />

// Dark theme
<Toaster theme="dark" />

API Reference

Toaster

The main component that renders toast notifications. Place this once at the root of your app.

Prop	Type	Default	Description
`theme`	`"light"` \| `"dark"`	-	The color theme of the toasts.
`position`	`"top-left"` \| `"top-center"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-center"` \| `"bottom-right"`	`"bottom-right"`	The position where toasts appear on the screen.
`duration`	`number`	`4000`	The duration in milliseconds before the toast auto-dismisses.
`closeButton`	`boolean`	`false`	Whether to show a close button on each toast.
`richColors`	`boolean`	`true`	Whether to use rich colors for different toast types.
`expand`	`boolean`	`false`	Whether toasts should be expanded by default.
`visibleToasts`	`number`	`3`	Maximum number of toasts visible at once.
`offset`	`string`	-	Offset from the edges of the screen.

Toast Options

Options that can be passed to any toast function:

Option	Type	Description
`description`	`string`	Additional text displayed below the title.
`duration`	`number`	Override the default duration for this toast.
`action`	`{ label: string, onClick: () => void }`	Action button configuration.
`cancel`	`{ label: string, onClick: () => void }`	Cancel button configuration.
`id`	`string \| number`	Custom ID to prevent duplicate toasts.
`onDismiss`	`() => void`	Callback when the toast is dismissed.
`onAutoClose`	`() => void`	Callback when the toast auto-closes.