# Banner

> Inline alert chiếm full-width, dùng cho thông báo persistent ở đầu page/section (khác Toast — Toast nổi tạm thời).

## API

| Prop | Type | Default | Description |
|---|---|---|---|
| `variant` | `'info' \| 'success' \| 'warning' \| 'danger'` | `'info'` | Tông màu + icon mặc định |
| `title` | `ReactNode` | required | Dòng tiêu đề bold |
| `description` | `ReactNode` | — | Mô tả phụ phía dưới title |
| `icon` | `ReactNode` | (auto theo variant) | Override icon |
| `cta` | `ReactNode` | — | Button hoặc link action (vd "Xem chi tiết") |
| `onClose` | `() => void` | — | Nếu có thì render nút × dismiss |
| `className` | `string` | — | Override container |

## Variants

- **info** (xanh) — thông báo bình thường, update tính năng
- **success** (xanh lá) — confirm hành động thành công
- **warning** (vàng) — cần chú ý, chưa critical
- **danger** (đỏ) — lỗi, hết hạn, action bắt buộc

## States

- **Default**: hiển thị title + icon
- **Với description**: thêm dòng phụ
- **Dismissible**: có `onClose` → user có thể đóng

## Usage

```tsx
import { Banner, Button } from '@cowork/ui';

<Banner
  variant="warning"
  title="Phiên đăng nhập sắp hết hạn"
  description="Vui lòng lưu thay đổi trước 5 phút nữa."
  cta={<Button size="sm">Gia hạn</Button>}
  onClose={() => setShown(false)}
/>
```

## Real-world example

- An Nhien admin: banner `warning` ở top dashboard "Pancake token còn 2 ngày, gia hạn ngay" — cta link sang settings.
- KHI Pilates booking app: banner `success` sau khi học viên đặt lịch xong "Đã giữ chỗ Reformer 19:00 thứ 5".
- A-Kryphan blog: banner `info` "Bài viết mới mỗi sáng thứ 2" ở header.

## Accessibility

- `role="alert"` — screen reader thông báo ngay khi mount
- Close button có `aria-label="Dismiss banner"`
- Color không phải tín hiệu duy nhất — có icon kèm theo
- Contrast `text-success` / `text-danger` etc. đã pass WCAG AA trên surface tương ứng

## Responsive behavior

Stack `flex items-start gap-3` giữ layout từ mobile lên desktop. Trên mobile hẹp, cta wrap xuống dòng tự nhiên do `flex` không nowrap.

## Related

- [[Toast]] — alert tạm thời, auto-dismiss, không full-width
- [[Modal]] — alert chặn flow, cần user action

## Source

`react/src/molecules/Banner.tsx`