# Toast

> Notification nổi tạm thời — báo kết quả action (save success, delete confirmed, error). Khác Banner ở chỗ tạm thời + nhỏ + thường stack góc màn hình.

## API

| Prop | Type | Default | Description |
|---|---|---|---|
| `variant` | `'info' \| 'success' \| 'warning' \| 'danger'` | `'info'` | Icon background theo variant |
| `title` | `ReactNode` | required | Dòng tiêu đề |
| `description` | `ReactNode` | — | Mô tả phụ |
| `icon` | `ReactNode` | (auto theo variant) | Override icon |
| `onClose` | `() => void` | — | Nếu có thì render nút × dismiss |
| `className` | `string` | — | Override container |

## Variants

- **info** (mặc định) — thông báo trung tính
- **success** — action thành công
- **warning** — cảnh báo cần chú ý
- **danger** — lỗi/fail

Khác Banner ở visual: Toast có icon trong circle nền nhẹ + shadow-md (nổi), không full-width border.

## States

- **Default**: title + icon
- **Với description**: thêm dòng phụ size-xs
- **Dismissible**: có `onClose` → nút ×

Toast không tự auto-dismiss — caller hoặc Toast provider phải set timer + unmount.

## Usage

```tsx
import { Toast } from '@cowork/ui';

<Toast
  variant="success"
  title="Đã lưu đơn hàng"
  description="Đơn #1284 đã được tạo và gửi tới khách."
  onClose={() => dismissToast(id)}
/>
```

Pattern thực tế: caller wrap component này trong ToastProvider/container (vd `react-hot-toast`, `sonner`) — stack góc phải dưới, animate enter/exit.

## Real-world example

- An Nhien POS: Toast `success` "Đã đồng bộ inventory" sau khi cron job chạy xong.
- KHI booking app: Toast `warning` "Lớp này đã đầy 8/8 chỗ, chuyển sang waitlist?".
- A-Kryphan editor: Toast `danger` "Auto-save lỗi, kiểm tra kết nối".

## Accessibility

- `role="status"` — screen reader đọc khi mount (polite, không interrupt)
- Cho action critical, caller nên dùng `role="alert"` thay vì status
- Close button có `aria-label="Close"`
- Color không phải tín hiệu duy nhất — có icon kèm

## Responsive behavior

Width fixed theo content (không full-width). Trên mobile container chứa toast thường full-width có padding — caller responsibility.

## Related

- [[Banner]] — alert persistent, full-width, không tự dismiss
- [[Modal]] — confirm action blocking, khác Toast ở chỗ chặn flow

## Source

`react/src/molecules/Toast.tsx`