cotton
Core UI Kit
36

Dialog

A modal dialog that interrupts the user with important content or a decision. 

<c-ui.dialog>
    <c-slot name="trigger">
        <c-ui.button>Open Simple Dialog</c-ui.button>
    </c-slot>

    <h3 class="text-lg font-semibold mb-2">Simple Content</h3>
    <p class="text-ink-600 dark:text-ink-400">
        This is a basic dialog with just content in the default slot.
        No header or footer sections defined.
    </p>
</c-ui.dialog>
{% cotton ui.dialog %}
    {% cotton:slot trigger %}
        {% cotton ui.button %}Open Simple Dialog{% endcotton %}
    {% endcotton:slot %}

    <h3 class="text-lg font-semibold mb-2">Simple Content</h3>
    <p class="text-ink-600 dark:text-ink-400">
        This is a basic dialog with just content in the default slot.
        No header or footer sections defined.
    </p>
{% endcotton %}

With Header & Footer

Use named slots for header and footer to structure complex dialogs.

<c-ui.dialog>
    <c-slot name="trigger">
        <c-ui.button variant="primary">Edit Profile</c-ui.button>
    </c-slot>

    <c-slot name="header">
        <c-ui.dialog.title>Edit Profile</c-ui.dialog.title>
        <c-ui.dialog.description>Make changes to your profile here. Click save when you're done.</c-ui.dialog.description>
    </c-slot>

    <div class="space-y-4">
       <c-ui.input label="Name" value="Pedro Duarte" />
       <c-ui.input label="Username" value="@peduarte" />
    </div>

    <c-slot name="footer">
        <c-ui.button variant="ghost" @click="close()">Cancel</c-ui.button>
        <c-ui.button variant="primary" @click="close()">Save changes</c-ui.button>
    </c-slot>
</c-ui.dialog>
{% cotton ui.dialog %}
    {% cotton:slot trigger %}
        {% cotton ui.button variant="primary" %}Edit Profile{% endcotton %}
    {% endcotton:slot %}

    {% cotton:slot header %}
        {% cotton ui.dialog.title %}Edit Profile{% endcotton %}
        {% cotton ui.dialog.description %}Make changes to your profile here. Click save when you're done.{% endcotton %}
    {% endcotton:slot %}

    <div class="space-y-4">
       {% cotton ui.input label="Name" value="Pedro Duarte" /%}
       {% cotton ui.input label="Username" value="@peduarte" /%}
    </div>

    {% cotton:slot footer %}
        {% cotton ui.button variant="ghost" @click="close()" %}Cancel{% endcotton %}
        {% cotton ui.button variant="primary" @click="close()" %}Save changes{% endcotton %}
    {% endcotton:slot %}
{% endcotton %}

Sizes

Control the width of the dialog using the size prop on the dialog component.

<c-ui.dialog size="sm">...</c-ui.dialog>
<c-ui.dialog size="lg">...</c-ui.dialog>
{% cotton ui.dialog size="sm" %}...{% endcotton %}
{% cotton ui.dialog size="lg" %}...{% endcotton %}

API Reference

Dialog Props

Name Description Type Options Default
:open Controlled open state. bool — False
:dismissable Whether the dialog can be closed by clicking outside or pressing escape. bool — True
size Max width of the dialog. str
smmdlgxl
md

Slots

Name Description Type Options Default
trigger The element that opens the dialog. slot —
header Header content, typically title and description. slot —
default Main content body. slot —
footer Footer actions. slot —
Theme
Accent
Ink