Alert

Overlays · Alert, Button

Inline banner for a state the page is in: a warning, a failure, a note. Lives in the page, unlike a toast.

Props: tone ("info" | "success" | "warning" | "danger" | "highlight"), title, children (one sentence), icon (override), action (one small Button), onDismiss.

One alert per page section, at the top of what it concerns. Two warnings: merge them.
Title says the state, body says the consequence or the next step.
Warning and danger are announced to screen readers; info and success are polite.
Never use an alert for something that already happened and needs no action: that's a toast.

PreviewCode

Bank feed syncs every 4 hoursNew transactions show up here and get matched automatically.

Domain verifiedhalo.app is ready to send mail.

halo.dev expires on 04.05.2026Auto-renew is off. If it lapses, mail on this domain stops.

Payment failedWe couldn’t charge the card ending 4242. We retry in 3 days.

3 agent drafts need your review

Props

Alert

Prop	Type	Notes
`tone?`	`Exclude<Tone, "neutral">`
`title?`	`ReactNode`
`icon?`	`IconName`
`action?`	`ReactNode`
`onDismiss?`	`() => void`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Button

Prop	Type	Notes
`variant?`	`"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"`
`size?`	`"md" \| "sm"`
`icon?`	`IconName`
`iconRight?`	`IconName`
`disabled?`	`boolean`
`type?`	`"button" \| "submit"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.