Design System · Components
AlertDisplay
Inline announcement bar with primary-tinted gradient and an "×" dismiss button. Sits above the section/page it's mounted in. Dismissal is per-id and per-session (sessionStorage) — same alert never shows twice in one browsing session, but reappears on a future visit.
Mode Theme
announce (default)
Primary→secondary gradient. Use for site-wide, non-urgent context-setting messages.
info
Lighter primary tint. Use for ambient context that doesn't need to "pop."
warning
Amber tint that survives all three modes.
center alignment
Pass align="center" for short, centered messages.
Props + behavior
<AlertDisplay
id="some-stable-id" /* required — sessionStorage dismiss key */
variant="announce" /* "announce" | "info" | "warning" — default "announce" */
align="left" /* "left" | "center" — default "left" */
text="Optional fallback string"
>
<!-- default slot beats the text prop when both are provided -->
<strong>Bold lede.</strong> Body copy with <a href="...">links</a>.
</AlertDisplay>
/* Behavior */
- On click of the × button: sessionStorage.setItem('alert-dismissed:{id}', '1')
- On hydration: if that key is set, the alert hides itself
- Cleared automatically when the browser tab closes — alert reappears next visit
- SSR-safe: markup always renders; dismiss is post-hydration only
/* Tokens read */
--color-primary, --color-secondary, --color-surface, --color-text, --color-text-muted,
--color-border, --fx-card-shadow