Alert

Quick Preview

Application saved

Your affordability details were saved successfully.

Usage

<Alert variant="info">
  <AlertTitle>Application saved</AlertTitle>
  <AlertDescription>Your draft is ready to continue.</AlertDescription>
</Alert>

Examples

Variants

Use variant to set the semantic tone and live-region behavior for status messages.

Info

Use for neutral system updates.

Success

Use when an action completes.

Warning

Use before a risky or blocked action.

Error

Use when the user must resolve an issue.

Without a title

AlertTitle is optional. Drop it and AlertDescription moves up to the first row, so a one-line alert lines up with its icon instead of sitting under an empty title row.

<Alert variant="warning">
  <TriangleAlert />
  <AlertDescription>Upload a valid ID to continue.</AlertDescription>
</Alert>

Props

Prop/API	Type	Default	Description
`variant`	`"info"	"success"	"warning"
`liveRegion`	`boolean`	`true`	Controls whether the alert announces changes.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Accessibility

Provide visible labels or accessible names for interactive controls.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.