get started
theming
components
interactive
A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert.
<div>
<button data-dialog-trigger="dialog1" class="btn sz-md variant-outlined">
<span class="btn-label">Open Dialog</span>
</button>
<dialog class="shadow-xl size-fit p-8 m-auto max-w-lg card variant-outlined origin-bottom" role="dialog" id="dialog1" aria-labelledby="dialog1_label">
<h2 id="dialog1_label" class="text-title font-medium">Add Delivery Address</h2>
<p class="text-body text-sm mt-2">The refund will be reflected in the customer’s bank account 2 to 3 business days after processing.</p>
<form action="post" id="userAddress" class="mt-6">
<div data-shade="950" class="field">
<label class="text-title font-medium text-sm" for="address">Address</label>
<input type='text' id="address" placeholder="Lubumbashi" required class="input variant-mixed sz-md rounded-btn"/>
</div>
</form>
<div class="mt-8 flex justify-end gap-3">
<button data-dialog-close class="btn sz-sm variant-outlined">
<span class="btn-label">Cancel</span>
</button>
<button class="btn sz-sm variant-primary" type="submit" form="userAddress">
<span class="btn-label">Save</span>
</button>
</div>
</dialog>
</div>
Copy paste the following in a .ts
file
document.addEventListener('DOMContentLoad', () => {
const dialogTriggers = document.querySelectorAll('[data-dialog-trigger]') as NodeListOf<HTMLButtonElement>;
dialogTriggers.forEach((dialogTrigger) => {
const dialogId = dialogTrigger.getAttribute('data-dialog-trigger') as string;
if (!dialogId) {
console.error('Dialog trigger is missing a valid "data-dialog-trigger" attribute.');
return;
}
const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
if (!dialog) {
console.error(`Dialog with ID "${dialogId}" not found.`);
return;
}
const dialogClose = dialog.querySelector('[data-dialog-close]') as HTMLButtonElement | null;
if (!dialogClose) {
console.error(`Close button not found in dialog with ID "${dialogId}".`);
return;
}
dialogTrigger.addEventListener('click', () => dialog.showModal());
dialogClose.addEventListener('click', () => dialog.close());
});
});
Copy and paste the following css in your main css
file
dialog[open]{
opacity: 1;
transform: scale(1);
}
dialog{
opacity: 0;
transform: scale(0.9);
transition:
opacity 0.1s ease-out,
transform 0.1s ease-out allow-discrete,
overlay 0.1s ease-out allow-discrete,
display 0.1s ease-out allow-discrete;
}
@starting-style {
dialog[open] {
opacity: 0;
transform: scale(0.9);
}
}
dialog::backdrop{
background-color: rgb(0 0 0 / 0%);
transition:
display 0.1s allow-discrete,
overlay 0.1s allow-discrete,
background-color 0.1s;
}
dialog[open]::backdrop {
background-color: var(--overlay-bg);
}
@starting-style {
dialog[open]::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}
<div>
<button data-dialog-trigger="dialog2" class="btn sz-md variant-outlined">
<span class="btn-label">Open Dialog</span>
</button>
<dialog class="shadow-xl size-fit m-auto max-w-md w-full card variant-outlined origin-bottom" role="dialog" id="dialog2" aria-labelledby="dialog2_label">
<h2 id="dialog2_label" class="text-title font-medium">Edit Repository</h2>
<p class="text-body text-sm mt-2">Edit repository details</p>
<hr class="border-dashed my-4" />
<form action="post" id="repoEdit" class="space-y-6">
<div class="field">
<label class="text-title" for="url">Website</label>
<input type='url' id="url" required class="input variant-mixed sz-md"/>
<span class="inline-block text-sm text-caption">Input description</span>
</div>
<div class="field">
<label class="text-title" for="desc">Description</label>
<textarea class="textarea variant-mixed sz-md" id="desc" rows="3" >Highly customizable components for crafting modern, personalized websites and applications.
</textarea>
</div>
<div data-shade="glassy" class="space-y-3">
<div class="field">
<div class="grid items-center gap-x-3 gap-y-1 [grid-template-columns:auto_1fr]">
<label for="c1" class="checkbox group">
<input checked class="peer" type="checkbox" id="c1" name="checkbox1" />
<svg class="checkbox-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;"><path d="M20 6 9 17l-5-5"></path></svg>
</label>
<label for="c1" class="block text-title select-none">Releases</label>
</div>
</div>
<div class="field">
<div class="grid items-center gap-x-3 gap-y-1 [grid-template-columns:auto_1fr]">
<label for="c2" class="checkbox group">
<input class="peer" type="checkbox" id="c2" name="checkbox1" />
<svg class="checkbox-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;"><path d="M20 6 9 17l-5-5"></path></svg>
</label>
<label for="c2" class="block text-title select-none">Packages</label>
</div>
</div>
<div class="field">
<div class="grid items-center gap-x-3 gap-y-1 [grid-template-columns:auto_1fr]">
<label for="c3" class="checkbox group">
<input class="peer" type="checkbox" id="c3" name="checkbox1" />
<svg class="checkbox-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;"><path d="M20 6 9 17l-5-5"></path></svg>
</label>
<label for="c3" class="block text-title select-none">Environments</label>
</div>
</div>
</div>
</form>
<div class="-mx-8 px-8 pt-6 border-t mt-8 flex justify-end gap-3">
<button data-dialog-close class="btn sz-sm variant-outlined">
<span class="btn-label">Cancel</span>
</button>
<button class="btn sz-sm variant-primary" type="submit" form="repoEdit">
<span class="btn-label">Save changes</span>
</button>
</div>
</dialog>
</div>