Actions

Alert

An assertive live message for important feedback that needs immediate attention.

When to use it: Use it for urgent failures or changes people must know about before continuing.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Loading example…

Alert.tsxtsx

import { useState } from "react";
import { Alert, Button } from "@comp0/react";

export function Example() {
  const [failed, setFailed] = useState(false);
  return (
    <div className="flex w-full max-w-80 flex-col items-start gap-3 text-base sm:text-sm">
      <Button
        className="min-h-10 rounded-lg bg-teal-700 px-3 py-2 font-medium text-white outline-offset-2 focus-visible:outline-2 focus-visible:outline-teal-600 dark:bg-teal-400 dark:text-zinc-950 dark:focus-visible:outline-teal-300"
        onClick={() => setFailed(true)}
      >
        Process payment
      </Button>
      {failed && (
        <Alert className="w-full rounded-lg border border-red-600/30 bg-red-50 p-3 text-red-900 dark:border-red-400/30 dark:bg-red-950 dark:text-red-100">
          Payment failed. Check the card details and try again.
        </Alert>
      )}
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

Alert
Assertive live message rendered with role=alert. Owns a DOM element.

Step by step

1
Add the main part
Mount Alert when the important message becomes true.
2
Add the supporting parts
Write a concise message that includes the next useful action.
3
Make the behavior clear
Reserve Alert for urgency; use Status for ordinary confirmations and progress updates.
Exampletsx
```
{
  failed && <Alert>Payment failed. Check the card details and try again.</Alert>;
}
```

Keyboard

Forms and accessibility

No form value; use it to report an important form or application result.

Accessibility checklist

Mount Alert when new urgent information appears; content present before assistive technology starts observing may not be announced as a change.
Reserve assertive interruption for failures and time-sensitive consequences, not routine confirmation.
Keep the message visible and include a clear recovery action when one exists.

API reference

Importtsx

import { Alert, Button } from "@comp0/react";

`Alert`

DOM element

Assertive live message rendered with role=alert.

Prop	Type	Description
`children`	`ReactNode`	Visible urgent message and any recovery action.