Preview
Instalasi
Terminal
bunx lapaktoto-ui add dialogPemakaian dasar
Struktur Dialog mirip dengan komponen Radix Dialog— composable & headless. Style sudah dipasang via CSS class default.
import {
Dialog, DialogContent, DialogTrigger,
DialogHeader, DialogTitle, DialogDescription,
DialogFooter, DialogClose,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
export function Example() {
return (
<Dialog>
<DialogTrigger render={<Button variant="outline" />}>
Buka dialog
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Konfirmasi</DialogTitle>
<DialogDescription>
Aksi ini tidak bisa dibatalkan.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose render={<Button variant="ghost" />}>Batal</DialogClose>
<Button>Lanjutkan</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}Form di dalam Dialog
Pola umum: dialog buat edit profil, ubah password, atau confirm destructive action.
Aksesibilitas
- Focus dipindah ke dialog saat dibuka, dikembalikan saat ditutup.
- Tab tetap dalam dialog (focus trap).
- ESC menutup dialog.
- Click di luar dialog menutup (override dengan
onPointerDownOutside). - Pakai
aria-labelledbykeDialogTitleotomatis.
Untuk konfirmasi destruktif (delete account, dll), pertimbangkan pakai komponen AlertDialog yang lebih restrictive (tidak bisa di-click-outside).
