Skip to content

Alert

A prominent message that draws user attention to important information.

---
import { CircleCheckIcon } from '@lucide/astro';
import { Alert, AlertDescription, AlertTitle } from '@bejamas/ui/components/alert';
---
<div class="grid w-full max-w-xl items-start gap-4">
<Alert>
<CircleCheckIcon size={32} />
<AlertTitle>Success! Your changes have been saved</AlertTitle>
<AlertDescription>This is an alert with title and description.</AlertDescription>
</Alert>
<Alert>
<AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>
</Alert>
<Alert variant="destructive">
<AlertTitle>Unable to process your payment.</AlertTitle>
<AlertDescription>
<p>Please verify your billing information and try again.</p>
<ul class="list-inside list-disc text-sm">
<li>Check your card details</li>
<li>Ensure sufficient funds</li>
<li>Verify billing address</li>
</ul>
</AlertDescription>
</Alert>
</div>
Terminal window
bunx bejamas add alert
---
import { Alert, AlertTitle, AlertDescription } from '@bejamas/ui/components/alert';
---
<Alert variant="default">
<CircleCheckIcon size={32} />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>Something happened successfully.</AlertDescription>
</Alert>
PropTypeDefault
variantAlertVariant"default"
classstring""