Component

Toast

Toast notification component with Neo-Brutalism styling.

Preview

Default Toast

This is a default toast message.

Installation

pnpm dlx brutx@latest add toast

Usage

import { Toast, ToastContainer, useToast } from "@/components/ui/toast"

function MyComponent() {
  const { toasts, addToast, removeToast, success, error } = useToast();

  return (
    <>
      <Button onClick={() => success('Saved!', 'Changes saved successfully.')}>
        Save
      </Button>
      
      <ToastContainer position="bottom-right">
        {toasts.map((toast) => (
          <Toast
            key={toast.id}
            variant={toast.variant}
            title={toast.title}
            description={toast.description}
            onClose={() => removeToast(toast.id)}
          />
        ))}
      </ToastContainer>
    </>
  );
}

Examples

All Variants

Default

This is a default notification.

Success!

Your action was completed successfully.

Error

Something went wrong. Please try again.

Warning

Please review before proceeding.

Info

Here's some helpful information.

Different Sizes

Use size prop to control toast width.

Small Toast

Compact notification.

Default Toast

Standard width notification.

Large Toast

Wider notification for more content.

Custom Icon

Use icon prop to provide a custom icon.

Custom Icon

This toast has a custom rocket icon.

With Action Button

Use action prop to add action buttons.

New Update Available

A new version is ready to install.

Connection Lost

Unable to connect to the server.

Interactive Example

Try different toast types and positions.

API Reference

Toast

Individual toast notification component.

Prop	Type	Default	Description
variant	"default" \| "success" \| "error" \| "warning" \| "info"	"default"	Toast style variant
size	"sm" \| "default" \| "lg"	"default"	Toast width
title	string	-	Toast title text
description	string	-	Toast description text
icon	ReactNode	(auto)	Custom icon (defaults based on variant)
action	ReactNode	-	Action button(s)
duration	number	5000	Auto-dismiss time in ms (0 to disable)
onClose	() => void	-	Callback when toast closes (enables close button)

ToastContainer

Container for positioning toasts.

Prop	Type	Default	Description
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Position of toast container

useToast Hook

Hook for managing toast state.

Return	Type	Description
toasts	ToastItem[]	Array of active toasts
addToast	(toast) => string	Add toast, returns ID
removeToast	(id: string) => void	Remove toast by ID
clearToasts	() => void	Remove all toasts
success	(title, desc?) => string	Shorthand for success toast
error	(title, desc?) => string	Shorthand for error toast
warning	(title, desc?) => string	Shorthand for warning toast
info	(title, desc?) => string	Shorthand for info toast

All Exports

Export	Type	Description
Toast	Component	Individual toast notification
ToastContainer	Component	Positioning container
useToast	Hook	Toast state management
toastVariants	CVA Function	Style variants for customization
ToastProps	Type	Toast component props
ToastContainerProps	Type	Container props
ToastItem	Type	Toast item type for hook