# Pagination Links to the pages of a long list, with Bootstrap's names: the current page says so in `aria-current="page"`, a page there is none of says so in `aria-disabled`. A list that pages by "the next 50" shows only previous, next and where you are. ## Examples A `nav` named for what it pages holds the list; each page is a link. A page there is none of - the previous one of the first page - is a link without `href` and `aria-disabled="true"`, out of the Tab order. Skip no page silently: an ellipsis stands for the pages between. Show no pagination for a single page. ```html ``` ### Previous and next A list that reads its rows page by page from where the last one ended - the fast way for a large table - knows no page numbers: it shows the rows on view and the way back and on. `page-text` holds words between the links. ```html ``` ### Sizes `pagination-sm` and `pagination-lg` on the list. ```html ``` ## States ## Keyboard and accessibility - The `nav` has a name - "Pages of excursions" - so a screen reader lists it among the landmarks; the current page is `aria-current="page"`, read as "current page". - An arrow-only link carries its words in `visually-hidden` text; the chevrons turn round right to left by `flip-rtl`. - A page there is none of has no `href`, so Tab passes it, and `aria-disabled="true"` greys it. ## Tokens From [`css/components/pagination.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/pagination.css), which declares no custom property of its own. It reads the theme's `--redz-space-4`, `--redz-control-height`, `--redz-space-8`, `--redz-border`, `--redz-radius-8`, `--redz-bg`, `--redz-text`, `--redz-text-muted`, `--redz-bg-hover`, `--redz-primary`, `--redz-primary-contrast`, `--redz-text-faint`, `--redz-control-height-sm`, `--redz-fs-12`, `--redz-control-height-lg`, `--redz-space-12`, `--redz-fs-16`.