Toast

Toasts display brief, temporary notifications. They appear at the edge of the screen and automatically dismiss after a timeout.

Import

import {
  ToastProvider,
  ToastRegion,
  toastSuccess,
  toastError,
  toastWarning,
  toastInfo
} from '@proyecto-viviana/solid-spectrum';

Setup

Wrap your app with ToastProvider and add ToastRegion where you want toasts to appear.

function App() {
  return (
    <ToastProvider>
      <YourApp />
      <ToastRegion placement="bottom end" />
    </ToastProvider>
  );
}

Toast Variants

Use helper functions to show different toast types.

toastSuccess('Changes saved successfully!');
toastError('Failed to save changes');
toastWarning('Your session will expire soon');
toastInfo('New update available');

Custom Duration

Control how long the toast stays visible.

toastSuccess('Quick message', { timeout: 2000 });
toastInfo('Stays longer', { timeout: 10000 });

Placement Options

Toasts can appear at different edges of the screen.

Placement options: top, top end, bottom, bottom end

<ToastRegion placement="top" />
<ToastRegion placement="top end" />
<ToastRegion placement="bottom end" />

ToastProvider Props

Props

Prop	Type	Default	Description
`children`	JSX.Element	—	App content

ToastRegion Props

Props

Prop	Type	Default	Description
`placement`	'top' \| 'top end' \| 'bottom' \| 'bottom end'	`'bottom'`	Where toasts appear on screen
`aria-label`	string	`'Notifications'`	Accessible label for the region

Toast Helper Options

Props

Prop	Type	Default	Description
`timeout`	number	`5000`	Duration in milliseconds before auto-dismiss
`priority`	number	`0`	Higher priority toasts appear first

Accessibility

Uses role="region" with aria-label
Individual toasts use role="alert" for screen reader announcements
Focus pauses the auto-dismiss timer
Hover pauses the auto-dismiss timer
Escape key dismisses the focused toast
Toasts are announced to screen readers via live regions