Alert

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

Features

Dismissible with onDismiss callback.

Auto-dismiss with configurable duration.

Status variants via data-status attribute.

Compound component with Title, Description, and Dismiss parts.

Example

Warning

Your session is about to expire. Please save your work.

Anatomy


import { Alert } from '@wire-ui/react'
 
<Alert.Root status="warning">
<div>
<Alert.Title>Warning</Alert.Title>
<Alert.Description>Your session is about to expire. Please save your work.</Alert.Description>
</div>
<Alert.Dismiss>
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</Alert.Dismiss>
</Alert.Root>

Styling

Alert uses data-status to indicate the alert type. Style each status variant using attribute selectors.


<Alert.Root className="
  border border-black
  data-[status=success]:border-green-500
  data-[status=warning]:border-yellow-500
  data-[status=danger]:border-red-500
" />

Using data attributes

Root sets data-status from the status prop. Values: "success", "warning", "danger", or absent for default.


[data-status="success"] { border-color: #22c55e; }
[data-status="warning"] { border-color: #eab308; }
[data-status="danger"]  { border-color: #ef4444; }

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; }