Button

2.0.0

Requires Celeste 3.0.0

Install or Update

wp celeste pull component Button

Dependencies will automatically be installed.

Properties

Prop	Description
`href`	Button link href
`icon`	Icon name
`iconPosition`	Placement of the icon, `start` or `end`
`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="send" iconPosition="end">Submit</Button>
    <Button type="button">Button</Button>
    <Button type="reset" icon="refresh" x-bind:click="console.log('Reset')">Reset</Button>
</div>