Components / Button

Button

# Introduction

The <zinq:button> component is a powerful button component that can be used to create a variety of buttons. It is a versatile component that can be used to create buttons with different styles, sizes, and colors.

# Usage

The only required child of the <zinq:button> component is the text that will be displayed on the button.

  
<zinq:button>Save</zinq:button>

# Variants

The <zinq:button> component supports different variants that can be used to create buttons with different styles.

  
<div class="flex gap-4">
    <zinq:button>Default</zinq:button>
    <zinq:button primary>Primary</zinq:buttonprimary>
    <zinq:button bare>Bare</zinq:button>
</div>

# Icon

The <zinq:button> component can also display an icon along with the text. The icon is specified as child SVG element, where icon attribute is used to specify the button label.

  
<div class="flex gap-4">
    <zinq:button icon="I love it">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
        </svg>
    </zinq:button>
    <zinq:button primary icon="I love it">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
        </svg>
    </zinq:button>
    <zinq:button bare icon="I love it">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
        </svg>
    </zinq:button>
</div>

# Sizing

You can change the size of the button by using xl , lg , sm , and xs attributes.

  
<div class="flex gap-4 items-center">
    <zinq:button primary xl>Extra large</zinq:button>
    <zinq:button primary lg>Large</zinq:button>
    <zinq:button primary>Default</zinq:button>
    <zinq:button primary sm>Small</zinq:button>
    <zinq:button primary xs>Extra small</zinq:button>
</div>

The <zinq:button> component can also be used to open a Modal component. The modal attribute is used to specify the ID of the modal dialog that should be opened when the button is clicked.

Modal title

Hello!

  
<zinq:button modal="id-of-the-modal">Open Modal</zinq:button>
<zinq:modal id="id-of-the-modal" title="Modal title"><p>Hello!</p></zinq:modal>

# Loading

You can use loading attribute to show a loading spinner inside the button when Livewire component is busy.

By default the button will show a spinner and the text Processing... . You can customize the loading text by passing a string to the loading attribute.

It leverages the Livewire loading state to show the loading spinner.

  
public function save(): void
{
    // Simulate a slow request to see loading state.
    sleep(2);
}

public function render(): string
{
    return <<<HTML
        <zinq:button loading wire:click="save">Save changes</zinq:button>
        <zinq:button loading="Doing some magic..." wire:click="save">Custom loading text</zinq:button>
    HTML;
}

# Disabled

When the button is disabled, it will not be clickable. You can use the disabled attribute to disable the button.

  
<zinq:button disabled>Disabled button</zinq:button>

# Full width

You can use block attribute to make the button full width.

  
<zinq:button block>Full width button</zinq:button>