Feedback

Toast

A transient system message — something that happened to the person, not something they asked for.

• Use it for system events: an export finished, a file couldn't be read, you're offline. Results of a request (a sent message, Map it, an idea action) are ChatTurn receipts instead.
• Placement: bottom-center, stacked above the chat dock (the Composer and its turns) with space-3 between — never over the Composer. On a canvas without a chat (a bare map, an MCP card) it sits space-5 from the bottom of that canvas.
• tone: neutral (default, sun icon), success, warning, danger, info. Provide title (what happened, sentence case, no trailing ellipsis), optional body, one action and onDismiss.
• Auto-dismiss after 5s unless it has an action; danger toasts stay.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface ToastProps {
  tone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
  title: string;
  action?: { label: string;
  onClick?: () => void };
  onDismiss?: () => void;
  children?: ReactNode
}

Use

import { Toast } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Toast/README.md