Skip to main content
Back to Home

Toast

Accessible toast notifications with ARIA live regions for screen reader announcements. Supports multiple types, auto-dismiss, and action buttons.

Toast Types

Different toast types for various message severities.

import { useState } from 'react';
import { Toast, ToastContainer } from '@a13y/react';

function Example() {
  const [toasts, setToasts] = useState<Toast[]>([]);

  const addToast = (message: string, type: 'info') => {
    const id = Date.now().toString();
    setToasts(prev => [...prev, { id, message, type }]);
  };

  const removeToast = (id: string) => {
    setToasts(prev => prev.filter(t => t.id !== id));
  };

  return (
    <>
      <button onClick={() => addToast('Hello!', 'info')}>
        Show Toast
      </button>
      <ToastContainer toasts={toasts} onRemove={removeToast} position="top-right" />
    </>
  );
}

Auto Close

Toasts automatically dismiss after a specified duration.

With Action Button

Add an action button to allow user interaction.

addToast(
  'Update available',
  'info',
  {
    label: 'Update Now',
    onClick: () => console.log('Update clicked')
  },
  0 // No auto-dismiss
);

Toast Props

NameTypeDefaultDescription
message*string-The message to display in the toast
type'info' | 'success' | 'warning' | 'error''info'Visual style and ARIA role of the toast
durationnumber5000Auto-dismiss duration in ms (0 = no auto-dismiss)
actionToastAction-Optional action button with label and onClick

Accessibility Features

  • ✓Uses role="status" for info or role="alert" for errors
  • ✓ARIA live regions announce messages to screen readers
  • ✓Close button with proper aria-label
  • ✓Auto-dismiss can be disabled for important messages
  • ✓Keyboard accessible action buttons