Streamline the Laravel SaaS Starter Kit - Launch Your Next SaaS Today

Modal

Open content in a pop-up window

x-t-modal
Slug: modal

Preview and Examples

<x-t-modal
    target="demo"
    dismissible
>
    <x-slot:content>
        <x-t-card border="false">
            <x-slot:body>
                <x-t-heading level="1">...</x-t-heading>
                <x-t-text>...</x-t-text>
                <x-t-text>...</x-t-text>
                <x-t-text>...</x-t-text>
            </x-slot:body>
        </x-t-card>
    </x-slot:content>
    <x-t-button
        variant="brand"
        prefix="<i class='fa-solid fa-rocket'></i>"
        class="tui-modal-trigger"
    >
        Open sesame
    </x-t-button>
</x-t-modal>

Attributes

Name Type Options Description
dismissible boolean
true false
Adds a close button
size string
xs sm md lg xl 2xl
Controls component scale
target string
_self _blank _parent _top
Adds a target
variant string
default brand primary secondary success warning danger light dark
A variant is like a colour palette