# Notice

A self-contained inline notice — severity icon, message, an optional action, and an optional dismiss.

<p class="kai-tag-sub">kai-notice</p>

A self-contained inline notice — a severity icon, your message, an optional trailing action, and an optional dismiss. It owns the box; you decide where it sits.

## Preview

> **tip:** 
Surface a short, contextual status message — a model that's temporarily unavailable above the composer, a "saved" confirmation at the top of a panel, a rate-limit warning in a settings page. It carries the severity icon and the right ARIA role for you. For transient pop-up feedback, reach for [Toast](/components/toast/) instead.

## Usage

Put the message as light-DOM text inside the element, set `severity` to color the icon and pick the a11y role, and add `dismissible` for a × that hides the notice and fires `kai-dismiss`. The notice owns its box — position it in your own layout.

```html
<kai-notice severity="warning" dismissible>
  Claude Fable 5 is temporarily unavailable — requests will fall back to Opus 4.8.
  <a slot="action" href="/status">Learn more</a>
</kai-notice>
```

## Examples

### Severities

`severity` drives the leading icon's color and the ARIA role — `alert` for `error`, `status` for everything else.

### Dismissible

Add `dismissible` for a × that hides the notice and emits `kai-dismiss`.

### With an action

Slot a link or button into `slot="action"` for a trailing call-to-action.

## Slots

The message is the default slot; these are the named seams:

```html
<kai-notice severity="info">
  Indexing your workspace…
  <svg slot="icon" viewBox="0 0 24 24" width="16" height="16"><!-- your glyph --></svg>
  <a slot="action" href="#">Cancel</a>
</kai-notice>
```

## Props

## Events

## Composed from