Pagination

Navigate between pages of content.

import {
  BuiPagination, BuiPaginationContent, BuiPaginationItem, BuiPaginationLink, BuiPaginationEllipsis,
} from 'ng-blatui';

<nav buiPagination>
  <ul buiPaginationContent>
    <li buiPaginationItem><a buiPaginationLink href="#">1</a></li>
    <li buiPaginationItem><a buiPaginationLink [active]="true" href="#">2</a></li>
    <li buiPaginationItem><a buiPaginationLink href="#">3</a></li>
    <li buiPaginationItem><bui-pagination-ellipsis /></li>
  </ul>
</nav>

Simple

<nav buiPagination>
  <ul buiPaginationContent>
    <li buiPaginationItem><a buiPaginationLink href="#">Previous</a></li>
    <li buiPaginationItem><a buiPaginationLink href="#">Next</a></li>
  </ul>
</nav>

Rounded

<a buiPaginationLink href="#" class="rounded-full">1</a>

With page info

Page 1 of 10

<div class="flex items-center justify-between">
  <p class="text-sm">Page 1 of 10</p>
  <nav buiPagination class="mx-0 w-auto">…</nav>
</div>

Contained

<nav buiPagination class="rounded-lg border bg-card p-1">…</nav>

With first / last

<!-- first « / prev ‹ / pages / next › / last » -->
<a buiPaginationLink href="#" aria-label="First"><svg><path d="m11 17-5-5 5-5" /><path d="m18 17-5-5 5-5" /></svg></a>