Drawer
Side panel for filters, details and settings that keeps page context. Slides from the inline end.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<button type="button" class="px-btn px-btn--secondary-gray" data-px-open="dr-1"><svg class="px-icon" aria-hidden="true">…</svg>Filters</button>
<dialog class="px-drawer" id="dr-1" aria-labelledby="dr-1-t">
<div class="px-drawer__head"><h2 class="px-modal__title" id="dr-1-t">Filters</h2><button type="button" class="px-icon-btn" data-px-close aria-label="Close"><svg class="px-icon" aria-hidden="true">…</svg></button></div>
<div class="px-drawer__body">
<fieldset class="px-choice-group"><legend>Status</legend><label class="px-check"><input type="checkbox" class="px-check__box" checked> Active</label><label class="px-check"><input type="checkbox" class="px-check__box"> Archived</label></fieldset>
<label class="px-switch"><input type="checkbox" role="switch" class="px-switch__track" checked> Only my projects</label>
</div>
<div class="px-drawer__foot"><button type="button" class="px-btn px-btn--secondary-gray" data-px-close>Reset</button><button type="button" class="px-btn" data-px-close data-toast="Filters applied">Apply</button></div>
</dialog>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>API reference
| Class / attribute | Type | Description |
|---|---|---|
dialog.px-drawer | class | Panel. |
__head · __body · __foot | class | Slots. |
Figma properties
Drawer2 variants · page “Overlays”Open
Side panel for secondary tasks (filters, details, settings) that keeps page context. Slides in from the inline-end edge: right in LTR, left in RTL. Same focus rules as Modal.
| Property | Type | Values |
|---|---|---|
| Title | Text | “Filters” |
| Content swap | Instance swap | — |
| 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 |
--px-drawer-width | 400px | 400px |
Accessibility
- Same focus rules as Modal.