Button

Basic Usage

<c-ui.button>button</c-ui.button>

{% cotton ui.button %}button{% endcotton %}

Variants

Pick a visual style with the variant prop. Each one pairs its own fill, hover and text treatment.

<c-ui.button>Default</c-ui.button>
<c-ui.button variant="primary">Primary</c-ui.button>
<c-ui.button variant="danger">Danger</c-ui.button>
<c-ui.button variant="subtle">Subtle</c-ui.button>
<c-ui.button variant="ghost">Ghost</c-ui.button>
<c-ui.button variant="text">Text</c-ui.button>

{% cotton ui.button %}Default{% endcotton %}
{% cotton ui.button variant="primary" %}Primary{% endcotton %}
{% cotton ui.button variant="danger" %}Danger{% endcotton %}
{% cotton ui.button variant="subtle" %}Subtle{% endcotton %}
{% cotton ui.button variant="ghost" %}Ghost{% endcotton %}
{% cotton ui.button variant="text" %}Text{% endcotton %}

Sizes

Button sizes match input sizes for consistent alignment in forms.

<c-ui.button size="xs">Extra Small</c-ui.button>
<c-ui.button size="sm">Small</c-ui.button>
<c-ui.button>Default</c-ui.button>
<c-ui.button size="lg">Large</c-ui.button>
<c-ui.button size="xl">Extra Large</c-ui.button>

{% cotton ui.button size="xs" %}Extra Small{% endcotton %}
{% cotton ui.button size="sm" %}Small{% endcotton %}
{% cotton ui.button %}Default{% endcotton %}
{% cotton ui.button size="lg" %}Large{% endcotton %}
{% cotton ui.button size="xl" %}Extra Large{% endcotton %}

Buttons align with inputs of the same size:

<div class="flex items-center gap-2">
    <div class="flex-1">
        <c-ui.input placeholder="Search..." />
    </div>
    <c-ui.button variant="primary">Search</c-ui.button>
</div>

<div class="flex items-center gap-2">
    <div class="flex-1">
        {% cotton ui.input placeholder="Search..." /%}
    </div>
    {% cotton ui.button variant="primary" %}Search{% endcotton %}
</div>

Outlined

<c-ui.button variant="default" outlined>Default</c-ui.button>
<c-ui.button variant="primary" outlined>Primary</c-ui.button>
<c-ui.button variant="danger" outlined>Danger</c-ui.button>
<c-ui.button variant="subtle" outlined>Subtle</c-ui.button>
<c-ui.button variant="ghost" outlined>Ghost</c-ui.button>

{% cotton ui.button variant="default" outlined %}Default{% endcotton %}
{% cotton ui.button variant="primary" outlined %}Primary{% endcotton %}
{% cotton ui.button variant="danger" outlined %}Danger{% endcotton %}
{% cotton ui.button variant="subtle" outlined %}Subtle{% endcotton %}
{% cotton ui.button variant="ghost" outlined %}Ghost{% endcotton %}

API Reference

Props