Alert

Shows a persistent message inside the page, announced by urgency.

Code

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

<Alert>
  <AlertTitle>Sync complete</AlertTitle>
  <AlertDescription>1,240 orders imported from the ERP at 9:42 AM.</AlertDescription>
</Alert>

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h('div', { className: 'pui-stage', style: { padding: 0 } },
    h(P.Alert, null, h(P.AlertTitle, null, 'Sync complete'), h(P.AlertDescription, null, '1,240 orders imported from the ERP at 9:42 AM.')),
    h(P.Alert, { variant: 'destructive' }, h(P.AlertTitle, null, 'Payment declined'), h(P.AlertDescription, null, 'The card ending in 4821 has expired. Update your payment method.'))));

Usage

What you provide

variant: default | destructive.
A 16px Heroicons Micro icon as the first child (the Alert positions it), e.g. ExclamationCircleIcon for errors.
AlertTitle: what happened. AlertDescription: what to do now.

Usage

For short-lived feedback after an action, use a toast, not an Alert.
Errors state the problem and the fix, without apologizing ("The card has expired. Update your payment method.").

Accessibility

PUI announces by urgency: the destructive variant uses role="alert"; the default variant uses role="status", so it doesn't interrupt reading. Pass role to override when needed.
Reading an alert needs no interaction and the alert never takes focus just to be read. Tab reaches only the links and buttons inside it.
The type is clear without color or icon alone: the title says what happened and the description says what to do.
Dismissible alerts have a visible close button; after closing, focus moves to a predictable place.
Errors about a field belong next to that field (FieldError), not only in an alert.

Adapted from Magoo 1.6.0 by Marcelo Sales: Alerts (alertas). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add alert

<Alert>
  <Icon />
  <AlertTitle />
  <AlertDescription />
</Alert>

Alert

Name	Type	Default
`variant`	`"default" \| "destructive"`	`"default"`
Style and urgency. `destructive` uses role="alert"; `default` uses role="status".
`role`	`string`	`by variant`
Overrides the announcement role.
`children`	`ReactNode`	—
An optional icon, then AlertTitle and AlertDescription.

AlertTitle

Name	Type
`children`	`ReactNode`
What happened.

AlertDescription

Name	Type
`children`	`ReactNode`
What to do now.