Bloc UIBloc UI

Pagination

Page navigation with boundary pages, sibling ranges, and built-in ellipsis handling.

Keyboard: Tab / Enter / Space on each button. ARIA: nav with aria-label, aria-current="page" on the active page.

$ npm install @bloc-ui/pagination

Default

Basic

Handy for moderate page counts where users benefit from quick direct jumps.

Current page: 1

Configurations

Wider Ranges

Increase sibling visibility when list exploration matters more than density.

Compact Boundaries

Minimal chrome — show only the current page and direct neighbours.

Large Page Count

Ellipsis grouping keeps the control readable for hundreds of pages.

States

First Page

Prev is disabled — only Next is active.

Last Page

Next is disabled — only Prev is active.

Single Page

When there is only one page, both controls are disabled.

Globally Disabled

Use [disabled]="true" to block all interaction — e.g. during data loading.

First & Last Buttons

Show First & Last

Add [showFirstLast]="true" to expose quick-jump buttons to page 1 and the final page.

Text Labels

Pass text labels alongside the default icons, or use them for full localization.

Theming

Custom tokens

Override active colour, border, and radius without touching component logic.