Toast

Toasts display brief, non-blocking notifications that appear temporarily and dismiss automatically or by user action.

Toast Playground

Preview

Code

Controls

State:

Default

Success

Error

Warning

Highlight

Size:

Small

Default

Action Button:

Installation

You can add the toast component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @phosphor-icons/react @react-aria/button @react-aria/focus @react-aria/interactions

Copy and paste the following code into your project.

Toast.tsx

ToastViewport.tsx

LinkButton.tsx

CompactIconButton.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

To show a toast, use the useToastActions hook:

import { ToastProvider, ToastViewport, useToastActions } from '@versaui/ui/components/Toast';

// Wrap your app with ToastProvider
function App() {
  return (
    <ToastProvider maxToasts={3}>
      <YourContent />
      <ToastViewport bottomOffset={24} />
    </ToastProvider>
  );
}

// Use the toast actions hook
function MyComponent() {
  const { toast, success, error, warning } = useToastActions();

  return (
    <button onClick={() => success('Saved successfully!')}>
      Save
    </button>
  );
}

States

Five semantic states are available — default, highlight, success, error, and warning:

const { toast, success, error, warning, highlight } = useToastActions();

toast('Default message');
success('Saved!');
error('Failed!');
warning('Careful!');
highlight('New feature available!');

Sizes

// Default size
toast('Default notification');

// Small size
addToast({ message: 'Compact notification', size: 'small' });

Standalone Toast

You can also use the Toast component directly:

import { Toast } from '@versaui/ui/components/Toast';

<Toast
  state="success"
  message="Changes saved!"
  onClose={() => handleClose()}
/>

Auto-Dismiss

Set duration to control auto-dismiss timing. Set to 0 to disable:

addToast({ message: 'Quick message', duration: 3000 });
addToast({ message: 'Stays until dismissed', duration: 0 });

Accessibility

Uses role="alert" or role="status" for screen reader announcements
Toast messages are announced via aria-live region
Close button is keyboard accessible with Tab and Enter
Auto-dismiss respects user preferences for reduced motion

Toast Props

Prop	Type	Default	Description
`state`	`'default' \| 'highlight' \| 'success' \| 'error' \| 'warning'`	`'default'`	Semantic state controlling color and icon.
`size`	`'default' \| 'small'`	`'default'`	Toast size.
`message`	`string`	`—`	Notification message text.
`buttonText`	`string`	`'Button'`	Action button label.
`showButton`	`boolean`	`true`	Show action button.
`showCloseIcon`	`boolean`	`true`	Show close icon.
`duration`	`number`	`5000`	Auto-dismiss duration in ms. Set to 0 to disable.
`visible`	`boolean`	`true`	Controlled visibility state.
`onClose`	`() => void`	`—`	Called when toast is dismissed.
`onButtonClick`	`() => void`	`—`	Called when action button is clicked.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page