Alert

1import { Alert } from "@/components/ui/alert"

<Alert
  tone="success"
  icon={<IconCheckmark />}
  title="Deployment successful"
  description="Your changes are now live on production."
/>

With Icon

Alert with a leading icon for added context.

<Alert
  icon={<IconCommand /}
  title="Keyboard shortcut updated"
  description="Command + K now opens the quick search."
/>

Information

Informational alert with a blue accent tone.

<Alert
  tone="info"
  icon={<IconInformation /}
  title="New version available"
  description="Mono DS 1.2 includes new components and bug fixes."
/>

Success

Confirms that an action completed successfully.

<Alert
  tone="success"
  icon={<IconCheckmark /}
  title="Deployment successful"
  description="Your changes are now live on production."
/>

Warning

Warns the user about an approaching issue.

<Alert
  tone="warning"
  icon={<IconWarning /}
  title="Approaching usage limit"
  description="You have used 90% of your monthly API quota."
/>

Error

Signals a failed action or error state.

<Alert
  tone="error"
  icon={<IconClose /}
  title="Payment failed"
  description="We could not process your card."
/>

With Close Button

Dismissible alert the user can close manually.

<Alert
  icon={<IconCommand /}
  title="Tip of the day"
  description="Press Cmd+Shift+P to open the command palette."
  closable
/>

Title Only

Compact alert without a description.

<Alert
  tone="success"
  icon={<IconCheckmark /}
  title="All systems operational"
/>

With List

Alert listing multiple related issues.

<Alert
  tone="error"
  icon={<IconClose /}
  title="Form submission failed"
  list={["Email is required", "Password too short", "Accept terms"]}
/>

With Action

Alert with primary and secondary action buttons.

<Alert
  icon={<IconCommand /}
  title="Update available"
  description="A new version of the CLI is ready to install."
  actions
/>