Alert

Alerts communicate important messages to users. They come in four semantic variants with optional icons and close buttons.

Variants

Success

Your changes have been saved successfully.

Warning

Your API key will expire in 3 days. Renew it to avoid disruption.

Error

Failed to publish content. Please check your connection and try again.

Info

A new version of the design system is available. Update when ready.

tsx

<Alert variant="success" title="Success">
  Your changes have been saved.
</Alert>

<Alert variant="danger" title="Error">
  Failed to publish content.
</Alert>

With Close Button

Click the X to dismiss each alert. Click "Reset" to bring them back.

Deployment successful.

Rate limit approaching.

Build failed on main branch.

Scheduled maintenance tonight at 11 PM.

tsx

<Alert variant="warning" closable onClose={() => setShow(false)}>
  Rate limit approaching.
</Alert>

Without Icon

This alert has no icon, using only color and text to communicate.

tsx

<Alert variant="info" showIcon={false}>No icon alert.</Alert>

Props

Prop	Type	Default	Description	Required
variant	`"success" \| "warning" \| "danger" \| "info"`	"info"	Semantic color scheme	No
title	`string`	-	Bold heading text	No
children	`ReactNode`	-	Alert message body	No
closable	`boolean`	false	Show a close button	No
showIcon	`boolean`	true	Show the variant icon	No
onClose	`() => void`	-	Callback when close button is clicked	No

Usage Guidelines

Use success to confirm completed actions.
Use warning for non-blocking issues that need attention.
Use danger for errors that prevent the user from continuing.
Use info for neutral announcements or tips.
Make alerts closable if they are non-critical. Critical errors should persist.