Modal

Those pop-up messages that either tell you something important, like "Are you sure you want to delete this user," or celebrate a success, like "Your order was placed!", or even fill out a form in.

Adding the component

php artisan spur:add interactives/modal

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php
"components": [
  'interactives/modal',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Confirm Modal 

<x-spur.modal>
  <x-slot:trigger>
    <x-spur.button size="normal">Cancel Subscription</x-spur.button>
  </x-slot:trigger>
  <p class="font-light text-zinc-900 text-2xl mb-4 dark:text-white">Are you sure you want to cancel?</p>
  <p class="sm:text-sm/6 text-zinc-500 dark:text-zinc-100">By cancelling the subscription you will not be able to enjoy our service.</p>
  <div class="flex gap-2 justify-end mt-4">
    <x-spur.button @click="opened = false" plain>Cancel</x-spur.button>
    <x-spur.button @click="opened = false" color="red">Cancel Subscription</x-spur.button>
  </div>
</x-spur.modal>

Modal Width

There is different width available sm, md, lg, xl, 2xl, 3xl, 4xl and 5xl

<x-spur.modal size="xl">
  <x-slot:trigger>
    <x-spur.button size="normal">Cancel Subscription</x-spur.button>
  </x-slot:trigger>
  <p class="font-light text-zinc-900 text-2xl mb-4 dark:text-white">Are you sure you want to cancel?</p>
  <p class="sm:text-sm/6 text-zinc-500 dark:text-zinc-100">By cancelling the subscription you will not be able to enjoy our service.</p>
  <div class="flex gap-2 justify-end mt-4">
    <x-spur.button @click="opened = false" plain>Close</x-spur.button>
    <x-spur.button @click="opened = false" color="red">Cancel Subscription</x-spur.button>
  </div>
</x-spur.modal>

Modal Roundness

There is different roundness available sm, md, lg, xl and 2xl

<x-spur.modal roundness="2xl">
  <x-slot:trigger>
    <x-spur.button>Cancel Subscription</x-spur.button>
  </x-slot:trigger>

  <p class="font-light text-2xl my-2">Are you sure you want to cancel?</p>
  <p class="sm:text-sm/6 text-zinc-500">By cancelling the subscription you will not be able to enjoy our service.</p>

  <div class="flex gap-2 justify-end mt-2">
    <x-spur.button @click="opened = false" color="red">Close</x-spur.button>
    <x-spur.button @click="opened = false">Cancel Subscription</x-spur.button>
  </div>
</x-spur.modal>

Form in Modal

You can include anything inside the modal, as it is flexible enough.

<x-spur.modal>
  <x-slot:trigger>
    <x-spur.button size="normal">Apply</x-spur.button>
  </x-slot:trigger>

  <p class="font-light text-zinc-900 text-2xl mb-4 dark:text-white">Apply for a new account!</p>
  <p class="sm:text-sm/6 text-zinc-500 dark:text-zinc-100 mb-5">Your application will be processed in 2-3 days and we will get back to you by email.</p>

  <x-spur.field name="name" id="name">
    <x-spur.label>Name</x-spur.label>
    <x-spur.input type="text"/>
  </x-spur.field>

  <x-spur.field name="email" id="email">
    <x-spur.label>Email</x-spur.label>
    <x-spur.input type="email"/>
  </x-spur.field>

  <x-spur.field name="agree" id="agree" type="checkbox">
    <x-spur.label>Agree to process your data.</x-spur.label>
    <x-spur.checkbox />
    <x-spur.description>Check this box to agree that we can process your application</x-spur.description>
  </x-spur.field>

  <div class="flex gap-2 justify-end mt-4">
    <x-spur.button @click="opened = false" plain>Close</x-spur.button>
    <x-spur.button @click="opened = false">Apply</x-spur.button>
  </div>
</x-spur.modal>

Modal from Dropdown

Renew
Cancel
Refund 
<x-spur.dropdown trigger-width>
  <x-slot:trigger>
    <x-spur.button size="normal" outline>Actions ↓</x-spur.button>
  </x-slot:trigger>
  <x-spur.dropdown-option>Renew</x-spur.dropdown-option>
  <x-spur.dropdown-option class="hover:bg-red-500">
    <x-spur.modal>
      <x-slot:trigger>
        Cancel
      </x-slot:trigger>
      <p class="font-light text-zinc-900 text-2xl mb-4 dark:text-white">Are you sure you want to cancel?</p>
      <p class="sm:text-sm/6 text-zinc-500 dark:text-zinc-100">By cancelling the subscription you will not be able to enjoy our service.</p>
      <div class="flex gap-2 justify-end mt-4">
        <x-spur.button @click="opened = false" plain>Cancel</x-spur.button>
        <x-spur.button @click="opened = false" color="red">Cancel Subscription</x-spur.button>
      </div>
    </x-spur.modal>
  </x-spur.dropdown-option>
  <x-spur.dropdown-option>Refund</x-spur.dropdown-option>
</x-spur.dropdown>

Customize Styles

You can easily extend the style for the modal to match your need by extending the classes, you might need to prefix them with ! in order to override defaults

<x-spur.modal class="!bg-cyan-700/90 border-2 !border-cyan-800">
  <x-slot:trigger>
    <x-spur.button size="normal" color="blue">Customized Alert</x-spur.button>
  </x-slot:trigger>
  <p class="font-light text-2xl mb-2 text-white">Custom modal</p>
  <p class="sm:text-sm/6 text-white">This is the best looking custom modal</p>
  <div class="flex gap-2 justify-end mt-4">
    <x-spur.button @click="opened = false" plain class="!text-white">Close</x-spur.button>
    <x-spur.button @click="opened = false" color="blue">I Understand</x-spur.button>
  </div>
</x-spur.modal>