ComponentsAlert Dialog

Alert Dialog

Shows confirmations that require user acknowledgment or action.

Basic Alert Dialog

Close account

Are you sure you want to close your account? This action is irreversible.

<button popovertarget="destructive-popover" class="bg-red tc-white px-4 py-2 rad-1 fs-sm fw-500 h:bg-red-7 f:oc-red-2 f:os-s f:ow-2">Close account</button>
<div id="destructive-popover" popover="manual" class="b-1 bc-silver-2 rad-1 p-6 bg-white max-w-sm m-auto">
<h3 class="ff-s fs-lg fw-600 tc-black mb-2">Close account</h3>
<p class="fs-sm tc-slate-6 mb-6">Are you sure you want to close your account? This action is irreversible.</p>
<div class="d-f jc-fe g-3">
<button popovertarget="destructive-popover" popovertargetaction="hide" class="bg-white tc-black b-1 bc-silver-4 px-3 py-2 rad-1 fs-sm fw-500 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Cancel</button>
<button popovertarget="destructive-popover" popovertargetaction="hide" class="bg-red tc-white px-3 py-2 rad-1 fs-sm fw-500 h:bg-red-7 f:oc-red-2 f:os-s f:ow-2">Yes, I'm sure</button>
</div>
</div>

Icon

Log out of your account?

You will need to enter your credentials again to access your account.

<button popovertarget="logout-popover" class="bg-slate-8 tc-white px-4 py-2 rad-1 fs-sm fw-500 h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Log out</button>
<div id="logout-popover" popover="manual" class="b-1 bc-silver-2 rad-1 p-6 bg-white max-w-sm m-auto">
<div class="d-f ai-c jc-c d-9 rad-9 bg-red-1 tc-red mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
</div>
<h3 class="ff-s fs-lg fw-600 tc-black mb-2">Log out of your account?</h3>
<p class="fs-sm tc-slate-6 mb-6">You will need to enter your credentials again to access your account.</p>
<div class="d-f jc-fe g-3">
<button popovertarget="logout-popover" popovertargetaction="hide" class="bg-white tc-black b-1 bc-silver-4 px-3 py-2 rad-1 fs-sm fw-500 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Cancel</button>
<button popovertarget="logout-popover" popovertargetaction="hide" class="bg-slate-8 tc-white px-3 py-2 rad-1 fs-sm fw-500 h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Log out</button>
</div>
</div>