Notice

kai-notice

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.

• Shadow DOM
• 5 severities
• Self-dismissing
• role: alert / status

Preview

When to use

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 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.

<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.

Code

Code

Code

Code

Dismissible

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

Code

With an action

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

Code

Slots

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

Slot	Mode	Purpose
action	inject	A trailing action beside the message — a link or button.
icon	replace	A custom leading icon (any inline SVG, inherits `currentColor`). Overrides the severity default and the `icon` prop — the same escape hatch as `kai-button`.

<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

Property	Type	Default	Notes
severity	"error" | "info" | "success" | "warning" | "neutral"	'neutral'	`neutral` (default) · `info` · `warning` · `error` · `success`. Drives the leading icon's color and the a11y role (`alert` for errors, else `status`).
icon	string	—	Leading icon: omit for the severity default, `"none"` to hide it, or a named icon to override.
dismissible	boolean	false	Show a dismiss (×) that hides the notice and emits `kai-dismiss`.

Events

Event	Detail	Notes
kai-dismiss	—	The notice was dismissed via its × (it also hides itself).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Notice

---

Need a hand? Report a bug Ask for help