Skip to content
heyrav design system
ComponentsSpec

Drawer

A dialog that slides from the right, or rises as a sheet on phones. For settings and detail that keep the page in view.

Filters

Share
Show code
<button class="btn btn-ghost" data-open="drw-demo">Open drawer</button>
<button class="btn btn-ghost" data-open="drw-sheet">Open sheet (phone)</button>
<dialog class="drawer" id="drw-demo" aria-labelledby="drw-t">
  <h2 id="drw-t" class="h4">Filters</h2>
  <div class="d-stack d-drawer-body">
    <label class="check"><input type="checkbox" checked> Case studies</label>
    <label class="check"><input type="checkbox"> Experiments</label>
    <button class="btn btn-primary btn-block" data-close>Apply</button>
  </div>
</dialog>
<dialog class="drawer drawer-sheet" id="drw-sheet" aria-labelledby="drw-s">
  <h2 id="drw-s" class="h4">Share</h2>
  <div class="d-stack d-drawer-body"><button class="btn btn-ghost btn-block" data-close><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Copy link</button><button class="btn btn-ghost btn-block" data-close><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Email</button></div>
</dialog>

Built on the same native <dialog> as Dialog. Slides in with --ease-snap over --d-move. Below 640, .drawer-sheet rises from the bottom instead.