Alert

Dismissible alert with optional auto-dismiss timer. Status variants applied via data-status.

Preview

Anatomy


import { Alert } from '@wire-ui/react'
 
<Alert.Root data-status="warning" onDismiss={() => setVisible(false)}>
  <Alert.Title>Heads up</Alert.Title>
  <Alert.Description>Your session expires in 5 minutes.</Alert.Description>
  <Alert.Dismiss>✕</Alert.Dismiss>
</Alert.Root>

Root props

Prop	Type	Default	Description
`onDismiss`	`() => void`	—	Called when dismissed (by button or auto-timer)
`isAutoDismissable`	`boolean`	`false`	Auto-dismiss after `dismissDuration` ms
`dismissDuration`	`number`	`3000`	Auto-dismiss delay in milliseconds

Status variants

Apply status via a standard HTML data attribute:


<Alert.Root data-status="success" />
<Alert.Root data-status="warning" />
<Alert.Root data-status="danger" />

Style each status with CSS:


[data-status="success"] { background: #f0fdf4; }
[data-status="warning"] { background: #fefce8; }
[data-status="danger"]  { background: #fef2f2; }