Alert

An inline alert message for displaying important information, warnings, success states, or error messages to the user.

Preview

Default

Destructive

Usage

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

{/* Default / Info */}
<Alert>
  <InfoIcon className="h-4 w-4" />
  <AlertTitle>New Feature Available</AlertTitle>
  <AlertDescription>
    You can now save your favourite hostels.
  </AlertDescription>
</Alert>

{/* Warning */}
<Alert variant="warning">
  <AlertTriangleIcon className="h-4 w-4" />
  <AlertTitle>Limited Availability</AlertTitle>
  <AlertDescription>
    Only 2 beds remaining for your selected dates.
  </AlertDescription>
</Alert>

{/* Destructive */}
<Alert variant="destructive">
  <XCircleIcon className="h-4 w-4" />
  <AlertTitle>Payment Failed</AlertTitle>
  <AlertDescription>
    Your payment could not be processed.
  </AlertDescription>
</Alert>

Props

variant
Type: "default" | "success" | "warning" | "destructive"
Default: "default"

The visual style variant of the alert

className
Type: string
Default: —

Additional CSS classes to apply to the alert

children
Type: ReactNode
Default: —

The content of the alert, typically AlertTitle and AlertDescription
Previous Command Next Tabs