Button

2026.1

Requires Celeste 2026.1

Properties

Prop	Description
`href`	Button link href
`icon`	Icon, placed before the text
`icon:trailing`	Icon, placed after the text
`variant`	Colour variant, `primary`, `secondary`, `tertiary`, `base` or `contrast`
`size`	Size variant, `sm`, `md`, or `lg`
`type`	Button type, `button`, `submit`, or `reset`. Not used if an `href` is set.

How to use it

<!-- Small -->
<div class="flex flex-wrap items-center gap-xs">
    <Button href="#" size="sm">Primary</Button>
    <Button href="#" size="sm" variant="secondary">Secondary</Button>
    <Button href="#" size="sm" variant="tertiary">Tertiary</Button>
    <Button href="#" size="sm" variant="contrast">Black</Button>
    <Button href="#" size="sm" variant="base">White</Button>
</div>

<!-- Medium -->
<div class="flex flex-wrap items-center gap-xs mt-sm">
    <Button href="#">Primary</Button>
    <Button href="#" variant="secondary">Secondary</Button>
    <Button href="#" variant="tertiary">Tertiary</Button>
    <Button href="#" variant="contrast">Black</Button>
    <Button href="#" variant="base">White</Button>
</div>

<!-- Large -->
<div class="flex flex-wrap items-center gap-xs mt-sm">
    <Button href="#" size="lg">Primary</Button>
    <Button href="#" size="lg" variant="secondary">Secondary</Button>
    <Button href="#" size="lg" variant="tertiary">Tertiary</Button>
    <Button href="#" size="lg" variant="contrast">Black</Button>
    <Button href="#" size="lg" variant="base">White</Button>
</div>

<!-- Other Types -->
<div class="flex flex-wrap items-center gap-xs mt-sm" x-data>
    <Button type="submit" icon:trailing="send">Submit</Button>
    <Button type="button">Button</Button>
    <Button type="reset" icon="refresh" x-bind:click="console.log('Reset')">Reset</Button>
</div>