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. Additional HTML attributes are forwarded to the underlying <button> element.

x-pajak::button

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>

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>