oui-kit/lib/basic/oui-notice.md

🎯 *UI toolkit with a French touch* 🇫🇷

# oui-notice

A prominent notice/overlay component for warnings, errors, or important messages. Covers the nearest `position: relative` parent. Supports an optional SVG icon.

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `undefined` | Title text. Alternative to the `title` slot. |
| `cover` | `boolean` | `undefined` | If `true`, renders as a full-screen overlay via `<Teleport to="body">` with focus trapping. |

## Slots

| Slot | Description |
|------|-------------|
| `(default)` | Message body content. |
| `title` | Custom title content. Falls back to the `title` prop. |
| `icon` | SVG icon shown above the title. |
| `footer` | Content below the message body, e.g. links or secondary actions. |

## CSS Variables

| Variable | Description |
|----------|-------------|
| `--notice-fg` | Icon and text foreground color. |
| `--notice-bg` | Background color of the notice box. |

## Example

```vue
<OuiNotice title="Warning">
  You should not do that!
</OuiNotice>

<!-- With icon and custom colors -->
<OuiNotice title="Error" style="--notice-fg: red; --notice-bg: #fee">
  <template #icon>
    <svg>…</svg>
  </template>
  Something went wrong.
</OuiNotice>

<!-- With footer slot -->
<OuiNotice title="Login">
  Please sign in.
  <template #footer>
    Need help? <a href="/support">Contact support</a>
  </template>
</OuiNotice>

<!-- Full-screen cover overlay with focus trap -->
<OuiNotice cover title="Loading…" />
```