Alert

A block-level informational box for inline content — tips, warnings, status. Class + data-attribute API: one .x-alert class plus data-variant, data-size, data-accent. Two-column grid: icon slot on the left, body on the right.

.x-alert is purely visual. It does not apply role="alert" (the ARIA live-region semantic). Add role="alert" or role="status" yourself when the content is dynamic and needs to be announced.

Install

import "elements-kit/ui/styles/theme.css";
import "elements-kit/ui/styles/scaling.css";
import "elements-kit/ui/styles/radius.css";
import "elements-kit/ui/styles/space.css";
import "elements-kit/ui/styles/typography.css";
import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/amber.css";
import "elements-kit/ui/styles/accent/amber.css";

import "elements-kit/ui/alert/alert.css";

API

<div class="x-alert" data-variant="soft" data-accent="amber" data-size="2">
  <svg class="x-alert-icon" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
    <path d="..." fill="currentColor" />
  </svg>
  <div>Your trial ends in 7 days.</div>
</div>

Attribute	Values
`data-variant`	`soft` (default), `surface`, `outline`
`data-size`	`1`, `2` (default), `3`
`data-accent`	any imported color scale (`amber`, `iris`, `crimson`, …)
`data-high-contrast`	modifier — bumps color to `--accent-12`

unset is not required on <div> / <aside>. Add it only if the alert is a <button> or <a> wrapper.

Sizing

`data-size`	padding	gap	radius
`1`	`--space-3`	`--space-2`	`--radius-3`
`2` (default)	`--space-4`	`--space-3`	`--radius-4`
`3`	`--space-5`	`--space-4`	`--radius-5`

The icon slot height is --line-height-2 for sizes 1–2 and --line-height-3 for size 3.

Variants

soft (default) — tinted background using --accent-a3. The everyday alert.
surface — --accent-a2 background + 1px --accent-a6 border. Sits closer to neutral.
outline — 1px --accent-a7 border, no background. For minimal noise.

Icon slot

Any direct child with class="x-alert-icon" lands in the icon column. Other direct children flow into the content column. Wrap multi-line content in a single <div> if you want it to share a column.

<div class="x-alert" data-variant="soft" data-accent="iris">
  <svg class="x-alert-icon" aria-hidden="true">…</svg>
  <div>
    <strong>Heads up.</strong>
    <p>This change applies to everyone in your workspace.</p>
  </div>
</div>

Theming

Set data-accent to pick the accent. Light/dark flips via .dark on a parent — see Light & dark.

Accessibility

.x-alert is visual only. Add role="alert" (urgent) or role="status" (advisory) yourself when content changes dynamically.
Pair icons with aria-hidden="true" and put the meaning in the text — icons alone don’t read in screen readers.