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 May 4, 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" \| "reset"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`children?`	`ReactNode`
`asChild?`	`boolean`	Render the single child element (a link, a router Link) with the button's look instead of a <button>.
`id?`	`string`
`name?`	`string`	Form field name and value, sent with the form when this button submits it.
`value?`	`string`
`form?`	`string`	The id of the form this button belongs to, when it sits outside it.
`title?`	`string`
`tabIndex?`	`number`
`autoFocus?`	`boolean`
`aria-label?`	`string`
`aria-labelledby?`	`string`
`aria-describedby?`	`string`
`aria-expanded?`	`boolean \| "true" \| "false"`	For disclosure and menu triggers: whether what the button controls is open.
`aria-controls?`	`string`
`aria-haspopup?`	`boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"`
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	For toggle buttons.
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.