<x-aura::button x-on:click="$dispatch('open-modal', 'demo-modal')">
    Launch Modal
</x-aura::button>

<x-aura::modal name="demo-modal" title="Confirm Deployment" description="...">
    <x-aura::text size="sm">Deploy version v2.4.0?</x-aura::text>
    <x-slot:footer>
        <x-aura::button variant="primary" size="sm">Start Deployment</x-aura::button>
    </x-slot:footer>
</x-aura::modal>

<x-aura::button variant="danger" x-on:click="$dispatch('open-modal', 'delete-modal')">
    Delete Repository
</x-aura::button>

<x-aura::modal name="delete-modal" title="Delete Repository">
    <p class="text-xs text-red-600">Warning: All data will be lost.</p>
    <x-slot:footer>
        <x-aura::button variant="danger" size="sm">Delete Permanently</x-aura::button>
    </x-slot:footer>
</x-aura::modal>