Drawer

Edge-anchored overlay panel for supplementary content without leaving the current page. The placement prop picks the edge: left, right (default), or bottom for mobile-style bottom sheets.

Choosing this component

• Showing detail or edit forms alongside a list or table where the user needs to stay in context.
• Navigation trees, filter panels, or settings that the user may want to keep open while interacting with the page.
• Secondary workflows that complement the current view rather than replacing it.
• Mobile-first surfaces that should slide up from the bottom of the viewport — use placement="bottom", optionally with dragHandleVisible.

Choosing something else

• Full-screen workflows that require the user's full attention — use a Modal or navigate to a new page.
• Brief contextual explanations or single-action prompts — use a Popover instead.

Related components

• Modal — blocking full-attention overlay when the user cannot continue without acting.
• Sidebar — persistent side panel that is always visible (not overlaid).

Usage

<script lang="ts">
  import Button from '@lostgradient/cinder/button';
  import Checkbox from '@lostgradient/cinder/checkbox';
  import Drawer from '@lostgradient/cinder/drawer';

  let open = $state(false);
  let triggerRef: HTMLElement | null = $state(null);

  const filters = Array.from({ length: 30 }, (_, index) => ({
    id: `drawer-overflowing-filter-${index + 1}`,
    label: `Filter group ${index + 1}`,
  }));
</script>

<Button
  label="Open drawer"
  onclick={(event: MouseEvent) => {
    triggerRef = event.currentTarget as HTMLElement;
    open = true;
  }}
/>

<Drawer bind:open title="Filters" {triggerRef}>
  <div style="display: grid; gap: 0.75rem;">
    {#each filters as filter (filter.id)}
      <Checkbox id={filter.id} label={filter.label} />
    {/each}
  </div>

  {#snippet footer()}
    <Button variant="secondary" label="Cancel" onclick={() => (open = false)} />
    <Button label="Apply" onclick={() => (open = false)} />
  {/snippet}
</Drawer>