STRATA

Components / Alert

Alert

Inline callouts that stay in the flow of a page or panel: notices, warnings, degraded states. Not for confirmations (AlertDialog) or transient feedback.

import { Alert, AlertTitle, AlertDescription } from '@layers/ui/alert'

Rendered stock

House rules

  • The icon is a direct child of Alert, before AlertTitle; the built-in grid aligns it. No wrapper divs.
  • Degraded states are shown honestly ("data unavailable"), never faked or silently swallowed.
  • Pick the variant by what happened, not by how loud you want to be: destructive = something failed or is about to be destroyed; warning = needs attention, nothing is broken; success = a confirmed outcome; default = neutral context.
  • The three states share ONE model: a faint opaque state tint, the state ink on top, and a state-tinted hairline at 20% of the ink. The border is not optional decoration — a settings shell remaps its body to --secondary, against which the success tint measures 1.007:1, so there the border does all the separating.
  • The 20% is matched to the house hairline, not picked by eye: --border reads 1.252:1 on --card and the state ink at 20% reads 1.256:1 on its tint, so a stateful alert is delimited exactly as firmly as every other surface. The hand-rolled boxes used /40, heavier than anything else on the page.
  • Tints are OPAQUE tokens (--success-subtle and friends); borders are alpha. A whole panel of compositing difference is visible where 1px of it is not, and --border is itself an alpha token.
  • No custom color styling on top. If a notice needs a color the variants do not have, the variant set is wrong — fix it here rather than at the call site.
  • An action inside an alert is normally a LINK in the title or description — both slots style anchors for exactly this (underline, offset, hover ink), it wraps with the sentence, and it needs no reserved space. AlertAction is the exception, for a real button: it is absolutely positioned into a FIXED reserve (the alert sets pr-18 = 72px, the action sits at right-3 = 12px), so it holds about 60px and nothing wider. A size="sm" button with a two-word label already exceeds that and overlaps the text. Narrow the label or use the link form; never widen the reserve at a call site.