---
title: Modal
---

<script>
  import { Modal, Toggle } from 'slender-ui'
  import { ComponentContainer } from '$lib'

  let disabled = false
</script>

Ye olde modal, for the _"I'm not sure this needs a new page but I don't know where to put it on the current page."_

<ComponentContainer>
  <Modal.Button label="Ain't nobody" color="primary" for="slender-modal-123" />

<Modal.Body id="slender-modal-123">

<h3 class="text-xl mt-0">Hello.</h3>
<p>Got em.</p>

    <Modal.CloseButton label="Close" variant="soft" class="mt-4 shadow-sm w-full" />

</Modal.Body>

  <div slot="code">

```svelte
<script>
  import { Modal } from 'slender-ui'
</script>

<Modal.Button label="Ain't nobody" color="primary" for="slender-modal-123" />

<Modal.Body id="slender-modal-123">
  <h3>Hello.</h3>
  <p>Got em.</p>

  <Modal.CloseButton label="Close" variant="soft" class="mt-4 w-full shadow-sm" />
</Modal.Body>
```

  </div>

</ComponentContainer>