Alerts & Toasts
Exported from Figma (page "• Alert"). Alert: four colors × Title on/off, with icon, actions, emoji, and a compact single-line state. Plus floating toasts and inline field feedback (MaV extensions).
Alert
Four colors (Primary / Red / Green / Orange) map to the alert/* tokens. Tinted 10% background, no border; the icon & title carry the variant color while the body stays neutral for legibility. Icon is bell-ringing at 19.43px; action buttons stay btn/textonly blue regardless of variant.
Title — On / Off
On: bold title + medium description stacked. Off: a single medium line, vertically centered with the icon.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Actions — 0 / 1 / 2 buttons
Trailing text buttons, gap 16px. First is btn/textonly/default #352eff, second is btn/textonly/hover #7c9dff.
Leading — Icon / Emoji
Icon-only (default), or the bell icon plus a 20px emoji glyph before the content.
Alert State (compact)
Single-line Success / Error state for inline validation. No title, no buttons — icon + one medium line. Success carries a subtle border matching its tint.
This is a Success message
This is an Error message
Toast — Dark (Default)
Floating, ephemeral notifications anchored to screen bottom. Background #191919.
Toast — Light Variant
Inline Field Feedback
Validation messages attached to a form field — the field and its message share one state color, using the --input-field/* namespace (error → red tint, success → green) with a matching leading icon. Hints are neutral.
Token Reference
| Token | Light | Usage |
|---|---|---|
| --alert\/primary\/bg-box | #352eff1a | Primary tint (10%) |
| --alert\/primary\/text-brand | #352eff | Primary title/body/icon |
| --alert\/danger\/bg-box | #ff00001a | Red tint (10%) |
| --alert\/danger\/text-danger | #ff0000 | Red title/body/icon |
| --alert\/success\/bg-box | #629c281a | Green tint (10%) |
| --alert\/success\/text-success | #629c28 | Green title/body/icon |
| --alert\/waring\/bg-box | #ff84001a | Orange tint (10%) — Figma typo "waring" |
| --alert\/waring\/text-warning | #ff8400 | Orange title/body/icon |
| --btn\/textonly\/default | #352eff | Alert action button 1 |
| --btn\/textonly\/hover | #7c9dff | Alert action button 2 |