Gaia and its docs are under construction. It's releasing soon!

Group 3

Button

A button tag is used to render a button.

Basic usage

{{ partial:components/button text="Button" }}

Variants

You can customise the button by passing a variant to the variant parameter.

{{ partial:components/button variant="primary" }}
{{ partial:components/button variant="secondary" }}
{{ partial:components/button variant="ghost" }}
{{ partial:components/button variant="danger" }}

Sizes

There are three different sizes for buttons. You can customise the sizes of the button by using the class parameter, and adding the classname of your desired size.

{{ partial:components/button class="btn-sm" }}
{{ partial:components/button class="btn-base" }}
{{ partial:components/button class="btn-lg" }}

Responsive

If you need different buttons and styles for different screen sizes, you can simply use css inside the class parameter.

{{ partial:components/button class="btn-sm md:btn-base lg:btn-lg" }}

Square and round buttons

You can create square and round buttons by using the btn-square and btn-round classes. Since these will be icon only buttons, the text is hidden and replaced by screen-reader only text.

{{ partial:components/button class="btn-square" }}
{{ partial:components/button class="btn-round" }}

Icons

Icons are added to the button by using the icon parameter.

{{ partial:components/button icon="account" }}

This uses the [svg tag](https://statamic.dev/tags/svg) under the hood, so the icon should be in one of the directories the svg tag cascades through. Gaia puts all icons in the `resources/svg` directory, so it's recommended to put your icons in there too.

Icon position

The icon position can be set to start or end by using the icon_position parameter.

{{ partial:components/button icon="account" icon_position="start" }}
{{ partial:components/button icon="account" icon_position="end" }}

Icon classes

The icon classes can be customised by using the icon_class parameter. This will override the default classes.

{{ partial:components/button icon="account" icon_class="w-4 h-4" }}

Loading state

The button component comes with a loading state that can be triggered by an Alpine reative variable. You can use the loading parameter to pass in the name of that variable.

<div x-data="getPosts()">
    {{ partial:components/button text="Get Posts" loading="getPostsLoading" button:@click="getPosts()" }}
</div>

<script>
    function getPosts() {
        return {
            getPostsLoading: false,

            getPosts() {
                this.getPostsLoading = true;
            }   
        }
    }
</script>

If you are using livewire, you can use the wire:loading.attr directive to toggle the loading state instead.

{{ partial:components/button button:wire:loading.attr="data-loading" }}

You can change the element for the button by using the as parameter. This let's you easily create links as buttons.

{{ partial:components/button as="a" button:href="gaiakit.com" }}

HTML attribute slots

You can use the button: prefix to pass in any HTML attributes to the button tag.

{{ partial:components/button 
    text="Button" 
    button:@click="getPosts()" 
    button:type="submit"
    button::disabled="getPosts"
}}

Slots

text

The text slot can be used to override the default text of the button. This may be useful if you need to conditionally set the text of the button with Alpine.

{{ partial:components/button text="Button" }}
    {{ slot:text }}
        <span>My custom text</span>
    {{ /slot }}
{{ /partial:components/button }}

attrs

The attrs slot can be used to add any additional attributes to the button that you can't already do with the Button Attributes Slot. This may be useful if you need to conditionally set the attributes of the button.

{{ partial:components/button }}
    {{ slot:attrs }}
        {{ if something}}
            data-attr="true"
        {{ else }}
            data-attr="false"
        {{ /if }}
    {{ /slot:attrs }}
{{ /partial:components/button }}