Alert

Import

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

Usage Guidelines

When to use

• To display persistent, inline messages that inform the user about a state or outcome (e.g., success, error, warning, info).
• For important contextual information that should remain visible on the page, not disappear automatically.
• At the top of a form to summarize validation errors, or within a section to highlight a status.

When NOT to use

• For transient feedback that should auto-dismiss — use a Toast instead.
• For blocking the user and requiring action — use AlertDialog instead.
• For short inline status labels — use Badge instead.

Preview

Destructive variant

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Something went wrong. Please try again.
  </AlertDescription>
</Alert>

Source

Props