---
title: Drawer
---

<script>
  import { ComponentContainer } from '$lib'
  import { Drawer } from 'slender-ui'
</script>

For all the things your designer forgot about.

<ComponentContainer>
  <Drawer.Button label="Slide on out" for="slender-drawer" color="primary" />

  <div slot="code">

<!-- prettier-ignore -->
```svelte
<script>
  import { Drawer } from 'slender-ui'
</script>

<Drawer.Button
  label="Slide on out"
  for="slender-drawer"
  color="primary"
/>

<Drawer.Body position="left" class="px-4" id="slender-drawer">
  <h2>Well hello!</h2>
  <p>This is a drawer, what did you expect.</p>

  <Drawer.CloseButton variant="soft" label="Close me!" />
</Drawer.Body>
```

  </div>
</ComponentContainer>

<Drawer.Body position="left" class="px-4" id="slender-drawer">

  <h2>Well hello!</h2>
  <p>This is a drawer, what did you expect.</p>

<Drawer.CloseButton variant="soft" label="Close me!" />
</Drawer.Body>