Components / Feedback & Status / Alert

Alert beta

A message that stays on the page: info, success, warning, danger. Flat, token-tinted, one icon.

Preview

Deploy scheduled.

The new version goes out at 02:00 JST. No action needed.

Backup complete.

All 128 files verified against the manifest.

Storage at 86%.

Exports stop working at 100%. Clear old previews or raise the limit.

<div style="display:grid;gap:10px;max-width:460px">
  <div class="k-alert"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg><div><b>Deploy scheduled.</b><p>The new version goes out at 02:00 JST. No action needed.</p></div></div>
  <div class="k-alert" data-tone="success"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8.5 12.2 2.4 2.4 4.6-5"/></svg><div><b>Backup complete.</b><p>All 128 files verified against the manifest.</p></div></div>
  <div class="k-alert" data-tone="warning"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4 2.8 20h18.4L12 4Z"/><path d="M12 10v4.4M12 17.2h.01"/></svg><div><b>Storage at 86%.</b><p>Exports stop working at 100%. Clear old previews or raise the limit.</p></div></div>
</div>

/* KATA Alert */
.k-alert{display:flex;gap:10px;padding:12px 14px;border:1px solid var(--k-accent-line);border-radius:var(--k-radius-lg);background:var(--k-accent-bg);color:var(--k-ink);font-size:13.5px;line-height:1.65}
.k-alert svg{flex:none;margin-top:1px;color:var(--k-accent-ink)}
.k-alert b{font-weight:600}
.k-alert p{color:var(--k-ink-2)}
.k-alert[data-tone="success"]{background:var(--k-success-bg);border-color:var(--k-success-line)}
.k-alert[data-tone="success"] svg{color:var(--k-success-ink)}
.k-alert[data-tone="warning"]{background:var(--k-amber-bg);border-color:var(--k-amber-line)}
.k-alert[data-tone="warning"] svg{color:var(--k-amber-ink)}
.k-alert[data-tone="danger"]{background:var(--k-danger-bg);border-color:var(--k-danger-line)}
.k-alert[data-tone="danger"] svg{color:var(--k-danger-ink)}

Usage

For information the user must not miss but does not need to act on right now. Toasts interrupt; alerts stay. One alert per region is usually enough.

Accessibility

Use role="alert" only for messages injected after load; static alerts are plain regions. Tone is never carried by color alone — the icon and title say it too.

Tooltip

Badge