Toast

Default

Show toast

import { Toast } from '@eekodigital/raster';

// In your app root:
// <Toast.Provider>
//   {children}
//   <Toast.Viewport />
// </Toast.Provider>

// Triggering a toast:
const [open, setOpen] = useState(false);

<button onClick={() => setOpen(true)}>Show toast</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Title>Report saved</Toast.Title>
  <Toast.Description>Your changes have been saved.</Toast.Description>
  <Toast.Close>✕</Toast.Close>
</Toast.Root>

Setup

Add Toast.Provider and Toast.Viewport once in your app root. The viewport is the fixed portal that renders toasts — position it after your main content.

Setup code — see above.

// app/root.tsx or layout component
import { Toast } from '@eekodigital/raster';

export function AppLayout() {
  return (
    <Toast.Provider swipeDirection="right">
      <App />
      <Toast.Viewport />
    </Toast.Provider>
  );
}

When to use

Use Toast for transient, non-blocking feedback — “Report saved”, “Link copied”, “Changes applied”. The user doesn’t need to act; the message auto-dismisses.

Don’t use Toast for errors that require action. Use inline validation for form errors, or AlertDialog for destructive confirmations.

Don’t use Toast for information the user must not miss. Toasts can be dismissed before they’re read — use a persistent banner or callout instead.

Props

Toast.Provider

Prop	Type	Default	Description
duration	number	5000	Default auto-dismiss delay in milliseconds for all toasts.
swipeDirection	’up’ | ‘down’ | ‘left’ | ‘right'	'right’	Direction of the swipe-to-dismiss gesture.

Toast.Root

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean) => void	—	Called when the toast opens or closes.
duration	number	5000	Auto-dismiss delay in milliseconds. Overrides the provider default.
type	’foreground’ | ‘background'	'foreground’	Accessibility hint: foreground for user-initiated actions, background for system events.

Toast.Title, Toast.Description, Toast.Close, Toast.Action

Prop	Type	Default	Description
children	ReactNode	—	Content of the element.
className	string	—	Additional CSS classes.