# Toast

Group: Feedback

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.


## Props

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

## Use

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