# Default

<x-button toggle="modal" target="#myModal">Launch default modal</x-button>

<x-modal id="myModal">
  <x-modal.header>
    <h5 class="modal-title" id="myModalLabel">Modal title</h5>
  </x-modal.header>

  <x-modal.body>
    Modal body goes here.
  </x-modal.body>

  <x-modal.footer></x-modal.footer>
</x-modal>

# Customize with props

<x-button toggle="modal" target="#myModal">Launch customized modal</x-button>

<x-modal id="myModal" backdrop="true" keyboard="true" scrollable="false" centered="true" size="lg" fullscreen="lg" aware:close="false">
  <x-modal.header>
    <h5 class="modal-title" id="myModalLabel">Modal title</h5>
  </x-modal.header>

  <x-modal.body>
    Modal body goes here.
  </x-modal.body>

  <x-modal.footer></x-modal.footer>
</x-modal>

# Using slots

<x-button toggle="modal" target="#myModalWithSlots">Launch modal with slots</x-button>

<x-modal id="myModalWithSlots">
  <fill:header>
    <h5 class="modal-title" id="myModalWithSlotsLabel">Modal title</h5>
  </fill:header>

  <fill:body>
    Modal body goes here.
  </fill:body>

  <fill:footer></fill:footer>
</x-modal>