Feedback Alert

Alert

A message in the page — what happened and what to do.

Preview

Default

Check-in tomorrow

Zostel Manali. Bring an ID. Then go higher.

Destructive

The payment didn't go through

Nothing was charged. Try again, or pick another way to pay.

Usage

tsx

import { Alert, AlertTitle, AlertDescription } from "zostel-ui";

<Alert>
  <AlertTitle>Check-in tomorrow</AlertTitle>
  <AlertDescription>Zostel Manali. Bring an ID.</AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>The payment didn't go through</AlertTitle>
  <AlertDescription>Nothing was charged. Try again.</AlertDescription>
</Alert>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	destructive for errors.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

variant

Type: "default" | "destructive"

Default: "default"

destructive for errors.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).