Alert

The Alert component is used to display important messages to the user. It comes in four variants: default (info), success, warning, and destructive.

Informational

Use the default alert for general information.

<Alert title="Heads up!">
  You can add components to your app using the CLI.
</Alert>

Success

Use the success variant to indicate a successful action.

<Alert variant="success" title="Success!">
  Your profile has been updated successfully.
</Alert>

Warning

Use the warning variant for non-critical warnings.

<Alert variant="warning" title="Warning">
  This action is not reversible. Please be certain.
</Alert>

Destructive

Use the destructive variant for errors or critical actions.

<Alert variant="destructive" title="Error">
  Your session has expired. Please log in again.
</Alert>