Spinner

Basic Usage

<c-ui.spinner />

{% cotton ui.spinner /%}

Sizes

Spinners come in sizes from size="xs" to size="2xl", defaulting to md.

<c-ui.spinner size="xs" />
<c-ui.spinner size="sm" />
<c-ui.spinner size="md" />
<c-ui.spinner size="lg" />
<c-ui.spinner size="xl" />
<c-ui.spinner size="2xl" />

{% cotton ui.spinner size="xs" /%}
{% cotton ui.spinner size="sm" /%}
{% cotton ui.spinner size="md" /%}
{% cotton ui.spinner size="lg" /%}
{% cotton ui.spinner size="xl" /%}
{% cotton ui.spinner size="2xl" /%}

Colors

Use the color prop to set the spinner color. The current option inherits the text color of its parent, making it easy to match surrounding content.

<c-ui.spinner color="accent" />
<c-ui.spinner color="zinc" />

<div class="text-rose-500">
    <c-ui.spinner color="current" />
</div>

{% cotton ui.spinner color="accent" /%}
{% cotton ui.spinner color="zinc" /%}

<div class="text-rose-500">
    {% cotton ui.spinner color="current" /%}
</div>

In a Button

Place a spinner inside a c-ui.button to communicate a loading state. Use color="current" so the spinner inherits the button text color, and color="white" on solid colored buttons.

<c-ui.button disabled>
    <span class="inline-flex items-center gap-2">
        <c-ui.spinner size="sm" color="current" />
        Saving...
    </span>
</c-ui.button>

<c-ui.button variant="primary" disabled>
    <span class="inline-flex items-center gap-2">
        <c-ui.spinner size="sm" color="white" />
        Processing...
    </span>
</c-ui.button>

{% cotton ui.button disabled %}
    <span class="inline-flex items-center gap-2">
        {% cotton ui.spinner size="sm" color="current" /%}
        Saving...
    </span>
{% endcotton %}

{% cotton ui.button variant="primary" disabled %}
    <span class="inline-flex items-center gap-2">
        {% cotton ui.spinner size="sm" color="white" /%}
        Processing...
    </span>
{% endcotton %}

API Reference

Props