AlertDialog

<div
role="alertdialog"
aria-describedby="alert-dialog-description"
aria-labelledby="alert-dialog-title"
class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg"
>
<div class="flex flex-col space-y-2 text-center sm:text-left">
  <h2 id="alert-dialog-title" class="text-lg font-semibold">
    Confirm Account Deletion
  </h2>
  <p id="alert-dialog-description" 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
  class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
>
  <button
    type="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
    type="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>