Alert

Feedback

v1.0.0

stable

Alert component for notifications with multiple variants and auto-dismiss.

This is an alert message.

variant="primary"

primary

This is an alert message.

variant="info"

info

This is an alert message.

variant="success"

success

This is an alert message.

variant="warning"

warning

This is an alert message.

variant="destructive"

destructive

npx inam-ui add alert

Usage Examples

Show a success message

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

Alert that auto-closes after 3 seconds

<Alert
  variant="info"
  title="Tip"
  description="This will auto-close in 3 seconds"
  autoClose={3000}
/>

Alerts are announced immediately when they appear.

Name	Type	Default	Description
`variant`	`'primary' \| 'info' \| 'success' \| 'warning' \| 'destructive'`	`'primary'`	Visual style of the alert.
`title`	`string`	`—`	Title text for the alert.
`description`	`string`	`—`	Description/message text.
`closable`	`boolean`	`true`	Whether the alert can be dismissed.
`autoClose`	`number`	`0`	Auto-dismiss timeout in milliseconds (0 = no auto-dismiss).
`onClose`	`() => void`	`—`	Callback when alert is closed.