<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn btn-error">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="h-6 w-6" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
<path fill="currentColor" d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" />
</svg>
<template x-teleport="body">
<dialog class="modal modal-open " x-show="open" @keyup.escape.window="open = false">
<div class="modal-box" @click.outside="open = false">
<form id="confirm">
<h3 class="font-bold text-lg">Are you sure ?</h3>
</form>
<div class="modal-action">
<button @click="open = false" class="btn btn-ghost">
cancel
</button>
<button form="confirm" class="btn btn-error">
ok
</button>
</div>
</div>
</dialog>
</template>
</button>
@jrmc.modal({ button: { class: 'btn-error' } })
@slot('button')
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="h-6 w-6" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024"><path fill="currentColor" d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"/></svg>
@end
<form id="confirm">
<h3 class="font-bold text-lg">Are you sure ?</h3>
</form>
@slot('action')
@!jrmc.button({ text: 'cancel', class: 'btn-ghost', ...$context.event.close })
@!jrmc.button({ text: 'ok', class: 'btn-error', form: 'confirm' })
@end
@end
Modal not implementation daysyui solution, use alpinejs for open modal