Actions and status

Alert

Render a structured status message for info, success, warning, or danger states. Basically, it's the UI equivalent of tapping the user on the shoulder very persistently.

Curated demo

Heads up

Tokens ship separately.

Published

Release tag moved to latest.

Check config

Missing package token in local shell.

Deploy failed

Production build needs attention before retry.

Reference

Render a structured status message for info, success, warning, or danger states. Basically, it's the UI equivalent of tapping the user on the shoulder very persistently.

Use Alert for stateful feedback that absolutely needs emphasis. If your app is on fire, use a danger alert.
Keep titles short and descriptions direct. No one wants to read a novel when their payment has just failed.
Don't overuse them! If everything is an alert, nothing is an alert.

Props

Name	Type	Default	Description
`title` *	`string`	—	The title of the alert.
`description`	`string`	—	A supporting description for the alert.
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	The status variant of the alert.
`class`	`string`	—	Additional CSS classes.

Example snippet

<div class="flex flex-col gap-3">
  <Alert title="Heads up" description="Tokens ship separately." variant="info" />
  <Alert title="Published" description="Release tag moved to latest." variant="success" />
  <Alert title="Check config" description="Missing package token in local shell." variant="warning" />
  <Alert title="Deploy failed" description="Production build needs attention before retry." variant="danger" />
</div>