Alert

Installation

npx shadcn@latest add @uqudo/alert

Usage

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

<Alert>
  <CheckCircle2 />
  <AlertTitle>Changes saved</AlertTitle>
  <AlertDescription>Your profile has been updated.</AlertDescription>
</Alert>

Drop an icon in as the first child and the alert switches to a two-column grid, sizing the icon and aligning the title and description beside it.

Examples

Destructive

Colours the text and icon with the destructive token for errors and failures.

With action

AlertAction pins its children to the top end corner and reserves room for them, so a button or link never overlaps the text.

API Reference

Alert

A div with role="alert".

AlertTitle

AlertDescription

AlertAction

An absolutely positioned slot for a control such as a button or a dismiss icon. When present, the alert adds end padding so the content clears it.

Data attributes