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>

API reference

nav[buiPagination]

Inputs

Prop	Type	Default	Description
`ariaLabel`	`string`	—	Accessible label for the navigation landmark; falls back to a localized default.

bui-pagination-ellipsis

Inputs

Prop	Type	Default	Description
`moreLabel`	`string`	—	Visually-hidden label announcing skipped pages; falls back to a localized default.

a[buiPaginationLink]

Inputs

Prop	Type	Default	Description
`active`	`boolean`	`false`	Whether this link represents the current page; sets `aria-current="page"`.
`size`	`"default" \| "icon" \| "lg" \| "sm"`	`'icon'`	Size variant controlling link dimensions and padding.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.