Components

Feedback

Components that communicate state and events to the user.

Alert

Contextual feedback messages for user actions or system state. Three variants: banner (filled), outline, and inline (compact).

x-pajak::alert

Types

Have your PIT-11 ready

It contains all figures you need to fill in the income section.

Return submitted

Confirmation sent to [email protected].

Deadline approaching

26 days remaining until April 30, 2026.

Missing document

Upload your PIT-11 before submitting.

alert-types.blade.php

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

<x-pajak::alert :type="AlertType::Info" title="Have your PIT-11 ready">It contains all figures you need to fill in the income section.</x-pajak::alert>
<x-pajak::alert :type="AlertType::Success" title="Return submitted">Confirmation sent to [email protected].</x-pajak::alert>
<x-pajak::alert :type="AlertType::Warning" title="Deadline approaching">26 days remaining until April 30, 2026.</x-pajak::alert>
<x-pajak::alert :type="AlertType::Error" title="Missing document">Upload your PIT-11 before submitting.</x-pajak::alert>

Variants

Deadline approaching

26 days remaining until April 30, 2026.

Deadline approaching

26 days remaining until April 30, 2026.

PESEL must be exactly 11 digits.

alert-variants.blade.php

@use('Pajak\Ui\Common\Enums\AlertType')
@use('Pajak\Ui\Common\Enums\AlertVariant')

<x-pajak::alert :type="AlertType::Warning" :variant="AlertVariant::Banner" title="Deadline approaching">26 days remaining until April 30, 2026.</x-pajak::alert>
<x-pajak::alert :type="AlertType::Warning" :variant="AlertVariant::Outline" title="Deadline approaching">26 days remaining until April 30, 2026.</x-pajak::alert>
<x-pajak::alert :type="AlertType::Error" :variant="AlertVariant::Inline">PESEL must be exactly 11 digits.</x-pajak::alert>

Dismissible

We auto-saved your progress

Changes were saved 2 minutes ago.

alert-dismissible.blade.php

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

<x-pajak::alert :type="AlertType::Info" :dismissible="true" title="We auto-saved your progress">Changes were saved 2 minutes ago.</x-pajak::alert>

Banner

Full-width, page-level notice with six tone variants, optional title, dismiss button, action slot, and progress bar.

x-pajak::banner

Types

banner-types.blade.php

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

<x-pajak::banner :type="BannerType::Info">We've prefilled your return from KAS. <a href="#">Review what we found.</a></x-pajak::banner>
<x-pajak::banner :type="BannerType::Success" title="Return submitted">Your PIT-37 has been sent to the tax office.</x-pajak::banner>
<x-pajak::banner :type="BannerType::Warning" title="Deadline approaching">Submit by <strong>30 April 2026</strong> to avoid a late penalty.</x-pajak::banner>
<x-pajak::banner :type="BannerType::Error" title="Submission failed">The tax office returned an error. Please try again.</x-pajak::banner>
<x-pajak::banner :type="BannerType::Neutral">Syncing documents — this usually takes about a minute.</x-pajak::banner>
<x-pajak::banner :type="BannerType::Promo" title="New: joint filing">File together with your spouse to maximize your refund.</x-pajak::banner>

Dismissible

banner-dismissible.blade.php

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

<x-pajak::banner :type="BannerType::Info" title="We've prefilled your return" :dismissible="true">
    3 documents and 2 income sources were imported automatically.
</x-pajak::banner>

With progress bar

banner-progress.blade.php

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

<x-pajak::banner :type="BannerType::Neutral" :progress="62">
    5 of 8 documents synced. This usually takes about a minute.
</x-pajak::banner>

Empty State

Placeholder component for empty lists, search results, and drop zones. All slots are optional.

x-pajak::empty-state

Default

No documents uploaded yet

Drop your PIT-11, ZUS, and any deduction receipts here.

empty-state-default.blade.php

<x-pajak::empty-state>
    <x-slot:icon>
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
    </x-slot:icon>
    <x-slot:title>No documents uploaded yet</x-slot:title>
    <x-slot:message>Drop your PIT-11, ZUS, and any deduction receipts here.</x-slot:message>
    <x-slot:actions>
        <x-pajak::button>Upload document</x-pajak::button>
    </x-slot:actions>
</x-pajak::empty-state>

Dashed & Compact variants

Drop documents here

PDF, JPG, PNG — up to 10 MB each

All caught up

No outstanding tasks for tax year 2025.

empty-state-variants.blade.php

@use('Pajak\Ui\Common\Enums\EmptyState\EmptyStateVariant')

<x-pajak::empty-state :variant="EmptyStateVariant::Dashed">
    <x-slot:icon>
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
    </x-slot:icon>
    <x-slot:title>Drop documents here</x-slot:title>
    <x-slot:message>PDF, JPG, PNG — up to 10 MB each</x-slot:message>
</x-pajak::empty-state>

<x-pajak::empty-state :variant="EmptyStateVariant::Compact">
    <x-slot:title>All caught up</x-slot:title>
    <x-slot:message>No outstanding tasks for tax year 2025.</x-slot:message>
</x-pajak::empty-state>

Toast

Transient notification overlay that auto-dismisses after a configurable duration. Triggered via the JS API or automatically from async form responses.

window.Pajak.PajakToast

Types

toast-types.blade.php

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

<div class="ex-row">
    <x-pajak::button :size="Size::Sm" onclick="window.Pajak.PajakToast.show({ type: 'success', title: 'Saved!', message: 'Changes have been applied.' })">Success</x-pajak::button>
    <x-pajak::button :size="Size::Sm" onclick="window.Pajak.PajakToast.show({ type: 'error', title: 'Something went wrong', message: 'Please try again later.' })">Error</x-pajak::button>
    <x-pajak::button :size="Size::Sm" onclick="window.Pajak.PajakToast.show({ type: 'warning', title: 'Heads up', message: 'This action may have side effects.' })">Warning</x-pajak::button>
    <x-pajak::button :size="Size::Sm" onclick="window.Pajak.PajakToast.show({ type: 'info', title: 'Just so you know', message: 'Your session will expire in 5 minutes.' })">Info</x-pajak::button>
</div>

Custom duration & dismiss

toast-custom-duration.blade.php

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

<div class="ex-row">
    <x-pajak::button :size="Size::Sm" onclick="window.Pajak.PajakToast.show({ type: 'info', title: 'Quick note', duration: 1500 })">1.5 s toast</x-pajak::button>
    <x-pajak::button :size="Size::Sm" onclick="window.Pajak.PajakToast.show({ type: 'info', title: 'Longer toast', message: 'This stays for 8 seconds.', duration: 8000 })">8 s toast</x-pajak::button>
    <x-pajak::button :size="Size::Sm" onclick="window.Pajak.PajakToast.dismissAll()">Dismiss all</x-pajak::button>
</div>

Error Page

Full-viewport error page with dot-grid background, watermark, coloured icon, status pill, title, description, and optional action slots. Five built-in HTTP codes with matching colours and default copy.

x-pajak::error-page

Props

Prop	Type	Default	Description
`code`	`int`	`404`	HTTP status code. Supported: `401`, `403`, `404`, `500`, `503`. Any other value renders a neutral variant.
`title`	`?string`	`null`	Overrides the default title for the given code.
`description`	`?string`	`null`	Overrides the default description for the given code.

Slots

Slot	Required	Description
`brand`	No	Brand corner content (top-left). Pass your logo mark and app name. Hidden when omitted.
`actions`	No	Action buttons rendered below the description. Hidden when omitted.
`footer`	No	Support footer text (bottom-centre). Hidden when omitted.

404 — Page not found

Error 404

Page not found

The page you're looking for has moved, been deleted, or never existed. Double-check the URL or head back to the dashboard.

error-page-404.blade.php

<div style="height: 420px; border-radius: 8px; overflow: hidden;">
    <x-pajak::error-page :code="404" style="min-height: 0; height: 100%;" />
</div>

500 — Something went wrong

Error 500

Something went wrong

We hit an unexpected snag on our end. Our team has been automatically notified and is working on a fix. Try refreshing in a moment.

error-page-500.blade.php

<div style="height: 420px; border-radius: 8px; overflow: hidden;">
    <x-pajak::error-page :code="500" style="min-height: 0; height: 100%;" />
</div>

403 — Access denied

Error 403

Access denied

You don't have permission to view this page. If you think this is a mistake, contact your account administrator or reach out to support.

error-page-403.blade.php

<div style="height: 420px; border-radius: 8px; overflow: hidden;">
    <x-pajak::error-page :code="403" style="min-height: 0; height: 100%;" />
</div>

401 — Session expired

Error 401

Session expired

Your session timed out for security. Sign in again to continue — your progress has been saved and you'll pick up right where you left off.

error-page-401.blade.php

<div style="height: 420px; border-radius: 8px; overflow: hidden;">
    <x-pajak::error-page :code="401" style="min-height: 0; height: 100%;" />
</div>

503 — Maintenance

Maintenance

Back very shortly

We're performing scheduled maintenance to improve reliability and performance. Sit tight — we'll be up again in just a few minutes.

error-page-503.blade.php

<div style="height: 420px; border-radius: 8px; overflow: hidden;">
    <x-pajak::error-page :code="503" style="min-height: 0; height: 100%;" />
</div>

Custom copy

Error 500

We'll be right back

Our engineers are on it. Please try again in a few minutes.

error-page-custom-copy.blade.php

<div style="height: 420px; border-radius: 8px; overflow: hidden;">
    <x-pajak::error-page
        :code="500"
        title="We'll be right back"
        description="Our engineers are on it. Please try again in a few minutes."
        style="min-height: 0; height: 100%;"
    />
</div>

With brand, actions & footer slots

Acme

Error 404

Page not found

The page you're looking for has moved, been deleted, or never existed. Double-check the URL or head back to the dashboard.

Go to dashboard

error-page-with-slots.blade.php

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

<div style="height: 420px; border-radius: 8px; overflow: hidden;">
    <x-pajak::error-page :code="404" style="min-height: 0; height: 100%;">
        <x-slot:brand>
            <div style="width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#5386E4,#3366CC);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;">A</div>
            <span style="font-weight:700;font-size:16px;letter-spacing:-0.01em;">Acme</span>
        </x-slot:brand>

        <x-slot:actions>
            <a href="#" class="pajak-btn pajak-btn--md pajak-btn--primary">Go to dashboard</a>
            <x-pajak::button :variant="Variant::Ghost" onclick="history.back()">Go back</x-pajak::button>
        </x-slot:actions>

        <x-slot:footer>
            Having trouble? <a href="mailto:[email protected]">Contact support</a>
        </x-slot:footer>
    </x-pajak::error-page>
</div>