Modal

{{-- Trigger Button --}}
<x-button onclick="document.getElementById('deploy-modal').setAttribute('aria-hidden','false')">
    Open Modal
</x-button>

{{-- Modal Component --}}
<x-modal id="deploy-modal" title="Confirm Deployment" size="md">
    <p>Deploy latest changes to the production branch?</p>

    <x-slot name="footer">
        <x-button variant="ghost" size="sm" onclick="document.getElementById('deploy-modal').setAttribute('aria-hidden','true')">Cancel</x-button>
        <x-button variant="primary" size="sm">Deploy Now</x-button>
    </x-slot>
</x-modal>