Toast

Preview

Interactive

Properties

Toast Title

Description Text

Toast Variant

Live Code Snippet

import { Button, ToastContainer, useToast } from '@moul-dev/ui';

export default function Example() {
  const toast = useToast();

  return (
    <>
      <Button
        onPress={() =>
          toast.show('Action Complete', {
            description: 'Your user profile details have been saved successfully.',
            variant: 'success'
          })
        }
      >
        Trigger Toast
      </Button>
      <ToastContainer />
    </>
  );
}

The Toast component is built with React Aria and styled using StyleX. Multiple active toasts are stacked vertically with elegant y-spacing.

Import

To use toast notifications in your application, you need to import the hooks and the container component:

import { useToast, ToastContainer } from '@moul-dev/ui';

Usage

Place the ToastContainer at the root of your application (or near the layout root), and call the useToast hook to trigger notifications:

import { useToast, ToastContainer, Button } from '@moul-dev/ui';

export default function Example() {
  const toast = useToast();

  return (
    <div>
      <Button onPress={() => toast.show('Hello World!')}>
        Show Toast
      </Button>
      
      {/* ToastContainer must be rendered to display the active toasts */}
      <ToastContainer />
    </div>
  );
}

Options & Variants

The toast.show function accepts a title string as the first argument, and an optional options object as the second:

toast.show(title: string, options?: {
  description?: string;
  variant?: 'info' | 'success' | 'warning' | 'error';
  timeout?: number; // duration in ms, default is 5000
});

Examples

Success Notification

toast.show('Action Completed', {
  description: 'Your changes have been saved.',
  variant: 'success',
});

Error Notification

toast.show('Request Failed', {
  description: 'Could not connect to server.',
  variant: 'error',
  timeout: 8000,
});

Warning Notification

toast.show('Unsaved Changes', {
  description: 'Please review your updates.',
  variant: 'warning',
});

Props

Toast Props

Prop

Type

Default className: react-aria-Toast

Toast

Properties

Styling

On this page