Pagination

Navigate through paginated result sets. The component is a thin UI layer over Laravel's LengthAwarePaginator — pass the paginator instance and the component renders the appropriate navigation controls.

Basic Usage

In your Livewire component (or controller):

public function render()
{
    return view('livewire.users', [
        'users' => User::paginate(15),
    ]);
}

In the Blade view:

<x-wirekit::pagination :paginator="$users" />

The component renders nothing if the paginator only has a single page.

Variants

Full (default)

Shows numbered page links, prev/next arrows, and a "Showing X to Y of Z results" summary. Use for long lists where jumping to a specific page matters.

<x-wirekit::pagination :paginator="$users" />

Simple

Shows prev/next buttons and a "Page X of Y" label. Ideal for infinite scrolls or when jumping to arbitrary pages is not needed.

<x-wirekit::pagination :paginator="$users" variant="simple" />

Mini

Just prev/next buttons — the most compact form, useful in tight layouts like sidebar widgets.

<x-wirekit::pagination :paginator="$users" variant="mini" />

Alignment

The justify prop controls how the summary text and page buttons are spread within the container:

<x-wirekit::pagination :paginator="$users" justify="between" />

<x-wirekit::pagination :paginator="$users" justify="center" />

<x-wirekit::pagination :paginator="$users" justify="end" />

<x-wirekit::pagination :paginator="$users" justify="start" />

The full variant with justify="between" (default) spreads the "Showing X to Y" summary to the left and page numbers to the right — the most common table layout pattern.

Width & Layout

The pagination stretches to fill its parent width (w-full), which allows justify="between" to spread its children apart. Wrap it in a constrained container if you need a narrower pagination area.

Translation

Every visible string runs through Laravel's __(), so the component follows your app locale with no props to set. WireKit ships no translation files of its own — the English source strings are the keys. Add them to your app's JSON language files (lang/de.json, lang/fr.json, …) to translate:

{
    "Pagination": "Seitennummerierung",
    "Showing :first to :last of :total results": "Zeige :first bis :last von :total Ergebnissen",
    "Page :current of :last": "Seite :current von :last",
    "Previous": "Zurück",
    "Next": "Weiter",
    "Go to page :page": "Gehe zu Seite :page"
}

The two sentences are single keys with placeholders rather than assembled from separate words, so you can reorder them freely — a locale that needs the total before the range, or a different particle between the numbers, writes exactly that. The numbers keep their emphasis wherever you move the placeholders.

Props

Paginator Object Reference

The component reads the following methods/properties from the paginator; all are provided automatically by Laravel's Model::paginate() and DB::table()->paginate():

Works identically with Paginator (for simple variant — no total() call) and CursorPaginator (use variant="mini" — only previousPageUrl/nextPageUrl are needed).

Accessibility

• The outer element is <nav role="navigation" aria-label="Pagination"> — screen readers announce this as a navigation landmark
• The current page uses aria-current="page" per WAI-ARIA Authoring Practices
• Prev/Next buttons have aria-label="Previous" / aria-label="Next" so their arrow glyphs are announced with meaning
• Disabled prev/next controls are rendered as <span> with aria-hidden="true" instead of <a> — they are not focusable and not announced as links
• Ellipses (…) are rendered with aria-hidden="true" (decorative)

Keyboard Interaction

Pagination renders as a list of native links and buttons — keyboard interaction is delegated to the browser.

Pitfalls

• Don't drive pagination via wire:click events on each link. The component renders native <a> elements pointing at real URLs (Laravel's linkCollection()); wire:click would intercept browser navigation and break the back button.
• Don't show all 100 pages. The component already truncates with ellipses (…) — overriding the truncation defeats accessibility (every link must fit in the keyboard tab order).
• A cursor paginator always renders as mini, whatever you ask for. simple and full state a page number or a total, and a CursorPaginator has neither by design — that is the point of cursor pagination, which exists for endless append-only lists that cannot afford a COUNT(*). The component detects the shape and renders previous/next rather than failing, and says so in the log when APP_DEBUG is on. Pass variant="mini" to make the intent explicit and silence the note.

Design Tokens

Customization

Override defaults without publishing views via config/wirekit.php:

'components' => [
    'pagination' => [
        'variant' => 'simple',
    ],
],

Usage & Conventions

Prop conventions — this component uses one or more of the shared semantic prop names (intent / variant / tone / surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.

Further Reading

• Laravel: Pagination
• Laravel: LengthAwarePaginator
• WAI-ARIA: aria-current