Thinkbit

Toast

Temporary notifications with accessible ARIA roles and automatic dismissal. Use the useToast hook to show toasts throughout your application.

Quick Examples

Click any button above to see a toast notification. Toasts automatically dismiss after 4.5 seconds.

Usage

import { useToast } from '@/components/ui/composites/toast-provider'

function MyComponent() {
  const { addToast } = useToast()
  
  const handleSuccess = () => {
    addToast({
      title: 'Success!',
      description: 'Your action was completed.',
      colorScheme: 'success',
      position: 'top-center',
    })
  }
  
  return <Button onClick={handleSuccess}>Show Toast</Button>
}

Features

  • Automatic dismissal with configurable timers (default: 4.5 seconds)
  • Manual close controls with accessible labels
  • Subtle and solid color scheme variants
  • Stackable layout with proper spacing
  • Accessible ARIA announcements for screen readers
  • Smooth entrance/exit animations
  • Multiple position options (top/bottom × left/center/right)
  • Support for all color schemes: success, error, info, warning, primary, muted

Color Scheme & Variant Examples

Trigger each button to see how different color schemes and variants appear.

Success Subtle

Light gradient background for low-priority confirmations.

Success Solid

Bold solid background to highlight important wins.

Error Subtle

Soft warning tone when a recoverable issue occurs.

Error Solid

Hard stop background for critical errors.

Info Subtle

Informational messages with subtle blue styling.

Warning Subtle

Warning messages with orange accent.

Primary Subtle

Primary brand color for important notices.

Position Examples

Toasts can be positioned at different locations on the screen. Each position has its own container.

Top Right

Default placement for confirmations and info banners.

CSS Classes:

top-4 right-4

Top Center

Center-aligned alerts for dashboard headers or modals.

CSS Classes:

top-4 left-1/2 -translate-x-1/2

Top Left

Great when the right side hosts other critical controls.

CSS Classes:

top-4 left-4

Bottom Right

Often used for undo helpers or secondary confirmations.

CSS Classes:

bottom-4 right-4

Bottom Center

Ideal for chat hooks or token tips above sticky footers.

CSS Classes:

bottom-4 left-1/2 -translate-x-1/2

Bottom Left

Useful if the footer has primary actions on the right.

CSS Classes:

bottom-4 left-4

API Reference

useToast Hook

Returns an object with the following methods:

  • addToast(payload) - Adds a new toast notification
  • removeToast(id) - Removes a toast by ID

addToast Parameters

title (required) - The toast title text
description (optional) - Additional description text
colorScheme (optional) - One of: success, error, info, warning, primary, muted (default: success)
variant (optional) - One of: subtle, solid (default: subtle, or solid for errors)
position (optional) - One of: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right (default: top-right)
icon (optional) - Custom icon name (default: based on colorScheme)