Alert
Menampilkan callout untuk pesan penting dengan varian default dan destructive.
bun x bosia@latest add alertKomponen alert majemuk dengan slot judul dan deskripsi.
Preview
Heads up!
You can add components to your app using the CLI.
Error
Your session has expired. Please log in again.
Sub-komponen
| Komponen | Elemen | Tujuan |
|---|---|---|
Alert |
<div> |
Kontainer root dengan styling varian dan role="alert" |
AlertTitle |
<h5> |
Heading tebal |
AlertDescription |
<div> |
Teks isi |
Props
Alert
| Prop | Type | Default |
|---|---|---|
variant |
"default" | "destructive" |
"default" |
Penggunaan
<script lang="ts">
import { Alert, AlertTitle, AlertDescription } from "$lib/components/ui/alert";
</script>
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>You can add components using the CLI.</AlertDescription>
</Alert>
<Alert variant="destructive">
<AlertTitle>Error</AlertTitle>
<AlertDescription>Your session has expired.</AlertDescription>
</Alert>