Alerts

Alerts surface important, time-sensitive messages inline so people can notice them without leaving the page. Use them for status updates, warnings, and errors that relate to the current view.

Inline

Alert toast bar

Non-dismissible examples below. Optional dismiss and trailing vs leading tone icons are in the Playground.

Information

Workspace policy updated — review the summary in Settings.

Success

This workflow has been published

Warning

Sync delayed — changes may take a few minutes in other regions.

Error

Could not reach the rules engine — edits are saved locally.

Toast

Stack toasts

The root Toaster uses the same colors and icons. Call toast.info, toast.success, toast.warning, or toast.error so the correct leading marker and surface apply. Triggers live in the Playground.

Structure

Anatomy

Container

max-width 302px, rounded-lg (8px), px-3 py-2, border + tinted background per variant.

Leading / tone icon

16px: Info (information), AlertTriangle (warning), Check (success), or × on a red disc (error). Uses the same color as the label text except the error disc (white × on #DC2626).

Label

Geist medium 14px, line-height 1.4, truncates with ellipsis when long.

Dismiss

Optional × after the text block; inherits the bar’s text color. Icon can be placed before or after the label via `leadingIconPlacement`.