Pagination
Page navigation built from Pagination (the <ul>),
PageItem (each <li>), and PageLink
(the clickable <a>), with active and
disabled states.
Import
import { Pagination, PageItem, PageLink } from '@metatoy/bootstrap-styled';Basic
Mark the current page’s PageLink with active and dead-end controls (like a
disabled previous arrow) with disabled.
Sizes
size="sm" | "lg" on Pagination scales padding, font-size, and radius for the
whole set.
Props
Pagination
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'lg' | — | Size variant → Bootstrap `.pagination-sm` / `.pagination-lg` (padding, font-size, radius). |
| as | React.ElementType | — | — |
PageLink
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | — | — |
| disabled | boolean | — | — |
| as | React.ElementType | — | — |
PageItem is a styled <li> and accepts native list-item attributes.
PageLink is polymorphic via as, so you can render it as a router link while
keeping the styling.
Theming
Pagination reads the Bootstrap --bs-pagination-* token family — link color and
hover/focus/active/disabled variants, plus --bs-pagination-bg,
--bs-pagination-border-color, and the size-specific padding/font tokens.
Override these on an ancestor to re-skin the control without touching markup.
Accessibility
Wrap the Pagination in a <nav aria-label="Page navigation"> landmark. Mark
the current page with active and add aria-current="page" to that
PageLink. Use disabled for non-navigable controls; give icon-only controls
(arrows) an accessible label via aria-label (e.g. aria-label="Previous").