Toast

A brief, auto-dismissing notification displayed at the edge of the screen.

Import

tsx

import { useToast } from '@tac-ui/web';

Usage

Wrap your app with ToastProvider (already included in the docs layout), then call useToast() to get the toast function.

Variants

This is a default toast message.

Your changes have been saved!

Something went wrong. Please try again.

Your session expires in 5 minutes.

A new update is available.

tsx

const { toast } = useToast();

// Default
toast('This is a default toast message');

// Success
toast('Your changes have been saved!', { variant: 'success' });

// Error
toast('Something went wrong.', { variant: 'error' });

// Warning
toast('Your session expires in 5 minutes.', { variant: 'warning' });

// Info
toast('A new update is available.', { variant: 'info' });

Interactive

tsx

const { toast } = useToast();

<Button onClick={() => toast('Saved!', { variant: 'success' })}>
  Show Toast
</Button>

API Reference

Props for the toast() function returned by useToast().

Prop	Type	Default	Description
message	string	-	The text content of the toast notification.
options.variant	"default" \| "success" \| "error" \| "warning" \| "info"	"default"	Visual style variant of the toast.
options.duration	number	5000	Auto-dismiss delay in milliseconds. Set to 0 to disable auto-dismiss.
options.action	React.ReactNode	-	Optional action element rendered to the right of the message.
options.icon	React.ReactNode	-	Optional icon rendered on the left (visible in default variant only).

ToastProvider Props

Props for the ToastProvider component that wraps the application.

Prop	Type	Default	Description
position	"top-right" \| "top-center" \| "bottom-right" \| "bottom-center"	"bottom-right"	Screen position where the toast stack is anchored.
maxToasts	number	5	Maximum number of toasts visible at once. Oldest toasts are trimmed when the limit is exceeded.
children	React.ReactNode	-	Application content to wrap with the toast context.