overlay · Normal DOM only

Toast

Bottom-right non-blocking notification with auto-dismiss. Use useToast() to fire from anywhere.

Use Toast for confirmations of background actions (saved, sent, queued) and for transient errors that do not block the workflow. Toasts are not for critical errors that need acknowledgement — for those use Banner inside the failing surface.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { ToastProvider, useToast } from '@8maverik8/twenty-design';

Examples

Five variants + action

tsx
const { toast } = useToast(); toast({ variant: 'success', title: 'Saved' });

Variants

variant

success--t-snack-bar-success-* — confirmations.

error--t-snack-bar-error-* — failures that user can recover from.

warning--t-snack-bar-warning-* — heads-up.

info--t-snack-bar-info-* — neutral notice.

defaultdefaultNeutral, no icon. Pair with an action for "Undo" patterns.

Guidelines

✓

Mount one ToastProvider near the app root.useToast() needs the provider in scope; multiple providers split the queue.

✓

Pair destructive actions with an "Undo" toast.Reversibility shifts UX from "are you sure?" prompts to fast, recoverable flow.

Use Toast for a blocking error.It auto-dismisses; the user might miss it. Use Banner or Modal for critical issues.