Alert

Displays a contextual message with status-based styling, an optional collapsible body, and dismiss functionality.

Examples

Default

This is an informational alert

<Alert status="info" title="This is an informational alert" />

Statuses

Info — something to be aware of

Success — operation completed

Warning — proceed with caution

Error — something went wrong

<div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
  <Alert status="info" title="Info — something to be aware of" />
  <Alert status="success" title="Success — operation completed" />
  <Alert status="warning" title="Warning — proceed with caution" />
  <Alert status="error" title="Error — something went wrong" />
</div>

With Description

Update available

A new version has been released. Please update at your earliest convenience.

<Alert
  status="info"
  title="Update available"
  description="A new version has been released. Please update at your earliest convenience."
/>

Block Description

Before you continue

• Back up your data before proceeding.
• Ensure all team members are notified.
• This action cannot be undone.

<Alert
  status="warning"
  title="Before you continue"
  description={( <ul style={{margin: 0, paddingInlineStart: '1.25rem'}}> <li>Back up your data before proceeding.</li> <li>Ensure all team members are notified.</li> <li>This action cannot be undone.</li> </ul> )}
/>

Dismissable

Tip of the day

You can dismiss this alert by clicking the X button.

Dismiss

<Alert
  status="info"
  title="Tip of the day"
  description="You can dismiss this alert by clicking the X button."
  isDismissable
/>

With Children

Deployment summary

Expand

3 services deployed successfully across 2 regions. No rollback actions were needed. Check the deployment dashboard for detailed metrics.

<Alert
  status="success"
  title="Deployment summary"
>
  {( <Text> 3 services deployed successfully across 2 regions. No rollback actions were needed. Check the deployment dashboard for detailed metrics. </Text> )}
</Alert>

Default Expanded

Deployment summary

Collapse

3 services deployed successfully across 2 regions. No rollback actions were needed. Check the deployment dashboard for detailed metrics.

<Alert
  status="success"
  title="Deployment summary"
  isDefaultExpanded
>
  {( <Text> 3 services deployed successfully across 2 regions. No rollback actions were needed. Check the deployment dashboard for detailed metrics. </Text> )}
</Alert>

With End Content

New version available

Update now

<Alert
  status="info"
  title="New version available"
  endContent={<Button label="Update now" size="sm" variant="ghost" />}
/>

Section Container

Card container (default)

Section container

<div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
  <Alert
    container="card"
    status="warning"
    title="Card container (default)"
  />
  <Alert container="section" status="warning" title="Section container" />
</div>

Custom Icon

Feature launched!

Your feature flag is now live in production.

<Alert
  status="success"
  title="Feature launched!"
  description="Your feature flag is now live in production."
  icon={<Icon color="accent" icon={Rocket} />}
/>

Kitchen Sink

System maintenance scheduled

Services will be briefly unavailable during the upgrade window.

View schedule

Collapse

Dismiss

Maintenance is planned for Saturday 2:00–4:00 AM UTC. Affected services include authentication, billing, and notifications. Please save your work before the maintenance window begins.

<Alert
  status="warning"
  title="System maintenance scheduled"
  description="Services will be briefly unavailable during the upgrade window."
  isDismissable
  isDefaultExpanded
  endContent={<Button label="View schedule" size="sm" variant="ghost" />}
>
  {( <Text> Maintenance is planned for Saturday 2:00–4:00 AM UTC. Affected services include authentication, billing, and notifications. Please save your work before the maintenance window begins. </Text> )}
</Alert>

API

Alert

Displays a contextual message with status-based styling, an optional collapsible body, and dismiss functionality.

Prop	Type	Default	Description
children	ReactNode	—	Extra content rendered below the alert header in a collapsible area.
className	string	—	Additional CSS class names applied to the root element.
container	"card" | "section"	'card'	Visual container style.
data-testid	string	—	Test ID applied to the root element.
description	ReactNode	—	Supporting description displayed below the title.
endContent	ReactNode	—	Content rendered at the end of the header, before collapse and dismiss controls.
icon	ReactNode	—	Custom status icon. A default icon is rendered when omitted.
isDefaultExpanded	boolean	false	Whether collapsible children are expanded initially.
isDismissable	boolean	false	Whether the alert can be dismissed.
onDismiss	() => void	—	Called when the dismiss button is clicked.
padding	0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10	4	Inner padding step.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
status*	"error" | "info" | "success" | "warning"	—	Status controlling role, icon, and color.
style	CSSProperties	—	Inline styles applied to the root element.
title*	ReactNode	—	Primary alert title.