Modal

A trigger and a modal share a name. The previews here are live — click them.

<flux:modal.trigger name="confirm-delete">
    <flux:button variant="danger" icon="trash">Delete order</flux:button>
</flux:modal.trigger>

<flux:modal name="confirm-delete" class="md:w-96">
    <div class="space-y-6">
        <div>
            <flux:heading size="lg">Delete this order?</flux:heading>
            <flux:text class="mt-2">This cannot be undone and the order is cancelled entirely.</flux:text>
        </div>

        <div class="flex gap-2">
            <flux:spacer />

            <flux:modal.close>
                <flux:button variant="ghost">Cancel</flux:button>
            </flux:modal.close>

            <flux:button variant="danger">Delete order</flux:button>
        </div>
    </div>
</flux:modal>

Flyout

variant="flyout" slides in from the trailing edge in both directions — the right in LTR, the left in RTL — with no extra classes.

<flux:modal.trigger name="cart">
    <flux:button icon="shopping-cart">Cart</flux:button>
</flux:modal.trigger>

<flux:modal name="cart" variant="flyout" class="md:w-96">
    <div class="space-y-6">
        <flux:heading size="lg">Cart</flux:heading>

        <div class="flex items-center justify-between gap-3">
            <flux:text>AirSound Pro</flux:text>
            <mds:quantity :value="1" :min="1" :max="3" size="sm" />
        </div>

        <flux:separator />

        <div class="flex items-center justify-between">
            <flux:text>Total</flux:text>
            <mds:price :amount="1890000" />
        </div>

        <flux:button variant="primary" class="w-full">Checkout</flux:button>
    </div>
</flux:modal>

Keyboard shortcut

A trigger can open on a shortcut instead of a click.

<flux:modal.trigger name="quick-search" shortcut="cmd.k">
    <flux:input as="button" placeholder="Press ⌘K" icon="magnifying-glass" kbd="⌘K" />
</flux:modal.trigger>

<flux:modal name="quick-search" variant="bare" class="w-full max-w-md">
    <mds:command>
        <mds:command.input placeholder="Search everything..." closable autofocus />

        <mds:command.items empty="No results found.">
            <mds:command.heading>Account</mds:command.heading>
            <mds:command.item icon="shopping-bag" kbd="⌘O">My orders</mds:command.item>
            <mds:command.item icon="wallet" kbd="⌘W">Wallet</mds:command.item>
        </mds:command.items>
    </mds:command>
</flux:modal>

Not dismissible

Force a decision by disabling the backdrop click and the escape key.

<flux:modal.trigger name="terms">
    <flux:button>Accept terms</flux:button>
</flux:modal.trigger>

<flux:modal name="terms" :dismissible="false" :escapable="false" class="md:w-96">
    <div class="space-y-6">
        <flux:heading size="lg">Accept the terms</flux:heading>
        <flux:text>You need to accept the terms before checking out.</flux:text>

        <flux:modal.close>
            <flux:button variant="primary" class="w-full">I accept</flux:button>
        </flux:modal.close>
    </div>
</flux:modal>

Reference

flux:modal

Prop	Description
name	Identifier shared with its trigger.
variant	Options: `flyout`, `bare`. Default: a centred dialog.
position	For flyouts: which edge it slides from.
dismissible	If `false`, clicking the backdrop does not close it.
escapable	If `false`, Escape does not close it.
closable	Shows or hides the built-in close button.
scroll	Which part scrolls when the content is tall.

Prop	Description
name	The modal to open.
shortcut	Keyboard shortcut that opens it, e.g. `cmd.k`.

Flyout

Keyboard shortcut

Not dismissible

Reference

flux:modal

flux:modal.trigger

flux:modal.close

Related