Modal
Dialog that blocks the page for a focused task or confirmation. Built on native <dialog>.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<button type="button" class="px-btn" data-px-open="md-1">Create project</button>
<dialog class="px-modal" id="md-1" aria-labelledby="md-1-t">
<form method="dialog" class="px-modal__body">
<span class="px-modal__icon"><svg class="px-icon" aria-hidden="true">…</svg></span>
<div><h2 class="px-modal__title" id="md-1-t">Create new project</h2><p class="px-modal__desc">Please enter a name for this project.</p></div>
<div class="px-field px-field--full"><label class="px-label" for="md-1-n">Project name</label><div class="px-input"><input id="md-1-n" placeholder="e.g. Website redesign"></div></div>
<button type="button" class="px-icon-btn px-modal__close" data-px-close aria-label="Close"><svg class="px-icon" aria-hidden="true">…</svg></button>
</form>
<div class="px-modal__foot"><button type="button" class="px-btn px-btn--secondary-gray" data-px-close>Cancel</button><button type="button" class="px-btn" data-px-close data-toast="Project created">Confirm</button></div>
</dialog>Usage
- Use for short tasks; long forms belong on a page or in a Drawer.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Destructive
px-modal--destructive.
<button type="button" class="px-btn px-btn--destructive" data-px-open="md-2">Delete project</button>
<dialog class="px-modal px-modal--destructive" id="md-2" aria-labelledby="md-2-t">
<div class="px-modal__body"><span class="px-modal__icon"><svg class="px-icon" aria-hidden="true">…</svg></span><div><h2 class="px-modal__title" id="md-2-t">Delete project?</h2><p class="px-modal__desc">This project and its files will be deleted. This can’t be undone.</p></div></div>
<div class="px-modal__foot"><button type="button" class="px-btn px-btn--secondary-gray" data-px-close>Cancel</button><button type="button" class="px-btn px-btn--destructive" data-px-close data-toast="Project deleted" data-tone="danger">Delete</button></div>
</dialog>API reference
| Class / attribute | Type | Description |
|---|---|---|
dialog.px-modal · --md · --lg · --destructive | class | Size and type. |
data-px-open="id" | attribute | Opens the dialog with showModal(). |
data-px-close | attribute | Closes it. Backdrop click and Escape close too. |
__body · __icon · __title · __desc · __foot · __close | class | Slots. |
Figma properties
Modal12 variants · page “Overlays”Open
Dialog that blocks the page for a focused task or confirmation. Width from --px-modal-width-*; place over --px-overlay-scrim. role=dialog + aria-modal, trap focus, Escape closes, return focus to the t…
| Property | Type | Values |
|---|---|---|
| Title | Text | “Create new project” |
| Description | Text | “Please enter a name for this project.” |
| Featured icon | Boolean | — |
| Content | Boolean | — |
| Content swap | Instance swap | — |
| Size | Variant | Small Medium Large |
| Type | Variant | Default Destructive |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-modal-divider | color-border-neutral-subtle | #f2f4f7 |
--px-modal-radius | radius-xl | 16px |
--px-modal-padding | spacing-2xl | 24px |
--px-modal-width-sm | 400px | 400px |
--px-modal-width-md | 560px | 560px |
--px-modal-width-lg | 720px | 720px |
Accessibility
- showModal() traps focus and sets the rest of the page inert.
- Label with aria-labelledby; focus returns to the trigger.