AlertDialog
Default AlertDialog
Loading...
<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg">
<!-- AlertDialog Content -->
<div class="flex flex-col space-y-2 text-center sm:text-left">
<!-- AlertDialog Title -->
<h2 class="text-lg font-semibold">Confirm Account Deletion</h2>
<!-- AlertDialog Description -->
<p class="text-sm text-muted-text">
Deleting your account is irreversible. All your account information, including data and settings, will be
permanently erased. Are you absolutely sure?
</p>
</div>
<!-- AlertDialog Footer -->
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
<button
class="inline-flex items-center justify-center gap-1 transition-colors duration-150 active:brightness-90 text-sm hover:bg-accent hover:text-accent-text rounded-md h-10 px-3">
Cancel
</button>
<button
class="inline-flex items-center justify-center gap-1 transition-colors duration-150 active:brightness-90 text-sm bg-primary text-primary-text hover:bg-primary/90 rounded-md h-10 px-3">
Continue
</button>
</div>
</div>
AlertDialog With Only Title
Loading...
<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg">
<!-- AlertDialog Content -->
<div class="flex flex-col space-y-2 text-center sm:text-left">
<!-- AlertDialog Title -->
<h2 class="text-lg font-semibold">Confirm Account Deletion</h2>
</div>
</div>
AlertDialog With Only Description
Loading...
<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg">
<!-- AlertDialog Content -->
<div class="flex flex-col space-y-2 text-center sm:text-left">
<!-- AlertDialog Description -->
<p class="text-sm text-muted-text">
Deleting your account is irreversible. All your account information, including data and settings, will be
permanently erased. Are you absolutely sure?
</p>
</div>
</div>
AlertDialog Footer
Loading...
<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg">
<!-- AlertDialog Footer -->
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
<button
class="inline-flex items-center justify-center gap-1 transition-colors duration-150 active:brightness-90 text-sm hover:bg-accent hover:text-accent-text rounded-md h-10 px-3">
Cancel
</button>
<button
class="inline-flex items-center justify-center gap-1 transition-colors duration-150 active:brightness-90 text-sm bg-primary text-primary-text hover:bg-primary/90 rounded-md h-10 px-3">
Continue
</button>
</div>
</div>
AlertDialog Structure
<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg"></div>
<!-- AlertDialog Content -->
<div class="flex flex-col space-y-2 text-center sm:text-left"></div>
<!-- AlertDialog Title -->
<h2 class="text-lg font-semibold">AlertDialog Title</h2>
<!-- AlertDialog Description -->
<p class="text-sm text-muted-text">AlertDialog Description</p>
<!-- AlertDialog Footer -->
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"></div>