Alert

A feedback component for displaying contextual messages in four semantic variants: info, success, warning, and error.

Variants

Pass the onDismiss prop to render a close button.

Alerts with descriptions, action buttons, bullet lists, and dismissible variants.

Dismissible alerts with action buttons. Try dismissing and resetting.

Prop	Type	Default	Description
`variant`	`"info" \| "success" \| "warning" \| "error"`	`"info"`	The alert type which determines the color and icon.
`title`	`string`	—	The alert title text.
`children`	`ReactNode`	—	The alert description content.
`onDismiss`	`() => void`	—	Callback when the dismiss button is clicked. When provided, a close button is rendered.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

variant"info"

"info" | "success" | "warning" | "error"

The alert type which determines the color and icon.

title

string

The alert title text.

children

ReactNode

The alert description content.

onDismiss

() => void

Callback when the dismiss button is clicked. When provided, a close button is rendered.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}