Toast

Feedback

Stablev1.0.0

Notification component for displaying temporary messages. Built with Ariakit. Requires ToastProvider wrapper.

Preview

Installation

npx @component-labs/cli add toast

This will:
- Install required dependencies
- Copy the Toast component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Toast } from "@component-labs/ui";

function App() {
  return (
    <Toast.Provider>
      <YourApp />
    </Toast.Provider>
  );
}

// In your component
const { toast } = Toast.useToast();

toast({
  title: "Notification",
  description: "This is a toast message",
});

Props

Name	Type	Default	Description
`ToastProvider.children*`	`ReactNode`	`-`	App content wrapped by the toast provider
`toast()`	`(data: ToastData) => string`	`-`	Show a toast notification. Returns toast ID.
`ToastData.title`	`ReactNode`	`-`	Toast title
`ToastData.description`	`ReactNode`	`-`	Toast description
`ToastData.variant`	`"default" \| "success" \| "error" \| "warning" \| "info"`	`"default"`	Toast style variant
`ToastData.duration`	`number`	`5000`	Auto-dismiss duration in milliseconds (0 = no auto-dismiss)
`ToastData.action`	`{ label: string; onClick: () => void }`	`-`	Optional action button
`success()`	`(title: ReactNode, description?: ReactNode) => string`	`-`	Show success toast
`error()`	`(title: ReactNode, description?: ReactNode) => string`	`-`	Show error toast
`warning()`	`(title: ReactNode, description?: ReactNode) => string`	`-`	Show warning toast
`info()`	`(title: ReactNode, description?: ReactNode) => string`	`-`	Show info toast
`dismiss()`	`(id?: string) => void`	`-`	Dismiss toast by ID, or all toasts if no ID provided

Examples

Setup

Wrap your app with ToastProvider

import { Toast } from "@component-labs/ui/toast";

function App() {
  return (
    <Toast.Provider>
      <YourApp />
    </Toast.Provider>
  );
}

Basic Toast

Show a simple notification

const { toast } = Toast.useToast();

toast({
  title: "Notification",
  description: "This is a toast message",
});

Success Toast

Show a success message

const { success } = Toast.useToast();

success("Saved!", "Your changes have been saved successfully.");

Error Toast

Show an error message

const { error } = Toast.useToast();

error("Error", "Something went wrong. Please try again.");

With Action

Toast with an action button

const { toast } = Toast.useToast();

toast({
  title: "Update available",
  description: "A new version is ready to install.",
  variant: "info",
  action: {
    label: "Install now",
    onClick: () => {
      // Handle update
    },
  },
});

Custom Duration

Toast that stays longer

const { toast } = Toast.useToast();

toast({
  title: "Important",
  description: "This will stay for 10 seconds",
  duration: 10000,
});

Persistent Toast

Toast that doesn't auto-dismiss

const { toast, dismiss } = Toast.useToast();

const id = toast({
  title: "Action required",
  description: "Please review before continuing",
  duration: 0, // No auto-dismiss
});

// Dismiss manually later
dismiss(id);

Performance

Bundle Size

~3KB gzipped

Minified and gzipped

Dependencies

•class-variance-authority
•clsx
•tailwind-merge
•lucide-react

Accessibility

•Proper ARIA role for notifications
•Screen reader announcements
•Keyboard accessible dismiss buttons
•Focus management