php artisan aura:add pagination

composer require bluestarsystem/aura-ui
php artisan aura:install

• Overview
• Basic Usage
• Props
• Variants / Examples
  • Full Pagination with Livewire
  • Simple Pagination (Previous / Next Only)
  • Custom Per-Page Options
  • Without Info Text
  • Minimal (No Per-Page Selector, No Info)
• Livewire Integration
• Live Demo
• Accessibility

Overview#

The <x-aura::pagination> component renders page navigation controls for paginated datasets. It displays page numbers with ellipsis for large ranges, previous/next buttons, result count information, and an optional per-page selector. The component is designed to integrate directly with Laravel's paginator instances and Livewire's pagination system.

Basic Usage#

<nav role="navigation" aria-label="Pagination" class="flex items-center justify-between">
    <div class="text-sm text-aura-surface-500">
        Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">48</span> results
    </div>
    <div class="flex items-center gap-1">
        <span class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm text-aura-surface-400 cursor-not-allowed">
            &laquo;
        </span>
        <span class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm font-semibold bg-aura-primary-600 text-white">1</span>
        <span class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm text-aura-surface-700 dark:text-aura-surface-300 hover:bg-aura-surface-100 dark:hover:bg-aura-surface-700 cursor-pointer">2</span>
        <span class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm text-aura-surface-700 dark:text-aura-surface-300 hover:bg-aura-surface-100 dark:hover:bg-aura-surface-700 cursor-pointer">3</span>
        <span class="inline-flex items-center justify-center w-9 h-9 text-sm text-aura-surface-400">&hellip;</span>
        <span class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm text-aura-surface-700 dark:text-aura-surface-300 hover:bg-aura-surface-100 dark:hover:bg-aura-surface-700 cursor-pointer">5</span>
        <span class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm text-aura-surface-700 dark:text-aura-surface-300 hover:bg-aura-surface-100 dark:hover:bg-aura-surface-700 cursor-pointer">
            &raquo;
        </span>
    </div>
</nav>

{{-- In a Livewire component --}}
<x-aura::pagination :paginator="$users" />

// In your Livewire component class
public function render()
{
    return view('livewire.users', [
        'users' => User::paginate(10),
    ]);
}

Props#

Variants / Examples#

Full Pagination with Livewire#

{{-- users-table.blade.php --}}
<div>
    <table class="w-full">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

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

Simple Pagination (Previous / Next Only)#

<x-aura::pagination :paginator="$posts" :simple="true" />

Custom Per-Page Options#

<x-aura::pagination
    :paginator="$orders"
    :perPageOptions="[5, 10, 20, 50]"
/>

Without Info Text#

<x-aura::pagination
    :paginator="$products"
    :showInfo="false"
/>

Minimal (No Per-Page Selector, No Info)#

<x-aura::pagination
    :paginator="$results"
    :showInfo="false"
    :showPerPage="false"
/>

Livewire Integration#

The pagination component uses wire:click for page navigation and wire:model.live for the per-page selector. In your Livewire component, add a $perPage property to enable the per-page dropdown:

use Livewire\WithPagination;

class UserList extends \Livewire\Component
{
    use WithPagination;

    public int $perPage = 10;

    public function render()
    {
        return view('livewire.user-list', [
            'users' => User::paginate($this->perPage),
        ]);
    }
}

Live Demo#

Accessibility#

• The component is wrapped in a <nav> element with role="navigation" and aria-label="Navigazione pagine".
• Disabled previous/next buttons use aria-disabled="true" so screen readers can identify inactive controls.
• The current page number is marked with aria-current="page".
• Previous and next buttons include aria-label attributes (Precedente, Successiva) and rel attributes (prev, next) for semantic navigation.