Toast

Short floating confirmations with auto-dismiss.

New version

Atomus 4.0 is ready.

Success toastError toast

ToastLive · light and dark follow the theme switch

Usage

import { Toast, ToastProvider, useToast } from '@stanvision/atomus-react';

// once, at the app root
<ToastProvider>{app}</ToastProvider>

// anywhere inside
const toast = useToast();
toast.show({ color: 'success', title: 'Changes saved' });

A short, floating confirmation. Wrap the app in ToastProvider and call useToast().show({...}).

Provide

• title, description, color (brand · gray · error · warning · success), an optional action.
• duration in ms (default 5000; errors stay until closed). Hover or focus pauses the timer.
• ToastProvider position — bottom-right (default), top-right, bottom-center; at most 4 at once.

Don’t

• Don’t put the only copy of important information in a toast — it disappears.

In Figma

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.