Components

Button

A versatile button component with multiple variants, sizes, and states. Supports loading indicators and forwards any HTML attributes to the underlying element.

Button

A general-purpose button in five variants, three sizes, and loading/disabled states. When href is set, renders as an <a> tag. Additional HTML attributes are forwarded to the underlying element.

x-pajak::button

Prop	Type	Default	Description
`type`	`string`	`'button'`	HTML button type: `button` \| `submit` \| `reset`. Ignored when `href` is set.
`size`	`string`	`'md'`	`sm` \| `md` \| `lg`
`variant`	`string`	`'primary'`	`primary` \| `secondary` \| `outline` \| `ghost` \| `danger`
`href`	`?string`	`null`	When set, renders an `<a>` tag instead of `<button>`
`disabled`	`bool`	`false`	Disables the button. On link buttons adds `is-disabled` class + `aria-disabled`.
`loading`	`bool`	`false`	Shows arc spinner, dims label, sets `cursor: progress`, blocks pointer events.

Variants

button-variants.blade.php

@use('Pajak\Ui\Common\Enums\Variant')

<div class="ex-row">
    <x-pajak::button>Primary</x-pajak::button>
    <x-pajak::button :variant="Variant::Secondary">Secondary</x-pajak::button>
    <x-pajak::button :variant="Variant::Outline">Outline</x-pajak::button>
    <x-pajak::button :variant="Variant::Ghost">Ghost</x-pajak::button>
    <x-pajak::button :variant="Variant::Danger">Danger</x-pajak::button>
</div>

Sizes

button-sizes.blade.php

@use('Pajak\Ui\Common\Enums\Size')

<div class="ex-row">
    <x-pajak::button :size="Size::Sm">Small</x-pajak::button>
    <x-pajak::button>Medium</x-pajak::button>
    <x-pajak::button :size="Size::Lg">Large</x-pajak::button>
</div>

States

button-states.blade.php

@use('Pajak\Ui\Common\Enums\Variant')

<div class="ex-row">
    <x-pajak::button disabled>Disabled</x-pajak::button>
    <x-pajak::button :loading="true">Loading</x-pajak::button>
    <x-pajak::button :variant="Variant::Secondary" :loading="true">Saving…</x-pajak::button>
</div>

Icon + label

button-icon.blade.php

@use('Pajak\Ui\Common\Enums\Variant')

<div class="ex-row">
    <x-pajak::button>
        <x-heroicon-o-plus width="16" height="16" />
        Add item
    </x-pajak::button>
    <x-pajak::button :variant="Variant::Secondary">
        <x-heroicon-o-arrow-down-tray width="16" height="16" />
        Export
    </x-pajak::button>
    <x-pajak::button :variant="Variant::Outline">
        <x-heroicon-o-clock width="16" height="16" />
        History
    </x-pajak::button>
    <x-pajak::button :variant="Variant::Ghost">
        <x-heroicon-o-x-circle width="16" height="16" />
        Cancel
    </x-pajak::button>
    <x-pajak::button :variant="Variant::Danger">
        <x-heroicon-o-trash width="16" height="16" />
        Delete
    </x-pajak::button>
</div>

<div class="ex-row" style="margin-top:0.75rem">
    <x-pajak::button id="demo-icon-loading-btn">
        <x-heroicon-o-check width="16" height="16" />
        Save changes
    </x-pajak::button>
</div>

<script type="module">
    const { PajakButton } = window.Pajak;
    const btn = document.getElementById('demo-icon-loading-btn');

    btn.addEventListener('click', () => {
        PajakButton.startLoading(btn, 'Saving…');

        setTimeout(() => PajakButton.stopLoading(btn), 1500);
    });
</script>

Link button

Go to Dashboard Settings Cancel Unavailable

button-link.blade.php

@use('Pajak\Ui\Common\Enums\Variant')

<div class="ex-row">
    <x-pajak::button href="#">Go to Dashboard</x-pajak::button>
    <x-pajak::button href="#" :variant="Variant::Outline">Settings</x-pajak::button>
    <x-pajak::button href="#" :variant="Variant::Ghost">Cancel</x-pajak::button>
    <x-pajak::button href="#" disabled>Unavailable</x-pajak::button>
</div>

Copy Button

A wrapper that makes any slotted content copy a value to the clipboard on click. Shows a "Copied!" tooltip bubble for 1.5 seconds, then fades out.

x-pajak::copy-button

Prop	Type	Default	Description
`value`	`string`	—	Required. The text written to the clipboard on click.
`icon`	`bool`	`false`	Renders a built-in clipboard icon button. The `$slot` is ignored when `true`.

The $slot is the clickable trigger when icon is false — any markup works: text, <code>, a <button>, etc. Additional HTML attributes are merged onto the wrapper <span>.

Plain text

Hello, world!

copy-button-text.blade.php

<x-pajak::copy-button value="Hello, world!">
    Hello, world!
</x-pajak::copy-button>

Code snippet

composer require pajak/ui

copy-button-code.blade.php

<x-pajak::copy-button value="composer require pajak/ui">
    <code>composer require pajak/ui</code>
</x-pajak::copy-button>

Icon trigger

sk-abc123xyz

copy-button-icon.blade.php

<div style="display:inline-flex;align-items:center;gap:0.5rem;">
    <code>sk-abc123xyz</code>
    <x-pajak::copy-button value="sk-abc123xyz" :icon="true" />
</div>