A dialog is a type of modal window with critical information which disable all app functionality when they appear and remains on the screen until confirmed/dismissed. Below we are presenting dynamic examples of the Dialog component that you can use in your project based on Taco.
Below you can find the code for the Dialog component.
<x-dialog
show="false"
dialogSize="m-4 w-2/5 min-w-[40%] max-w-[40%]"
>
<x-slot name="header">
Its a simple dialog.
</x-slot>
<x-slot name="body">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum praesentium magni corrupti explicabo!
</x-slot>
<x-slot name="footer">
<x-button
color="bg-transparent hover:bg-red-500/10 active:bg-red-500/30"
textColor="text-red-500"
shadow="shadow-none"
data-ripple-dark="true"
@click="show(false)"
>
Cancel
</x-button>
<x-button
color="bg-green-500" shadow="shadow-green-500/20"
data-ripple-light="true"
>
Confirm
</x-button>
</x-slot>
</x-dialog>