# Pagination > Pagination splits a long list or table into pages and lets the user move between them, with sizes, icons and disabled states. Navigate through multi-page content with pagination controls. Source: https://docs.tabler.io/ui/components/pagination --- ## Basic example The basic pagination has page numbers with previous and next icon links: ```html ``` ## With first and last links With many pages, add first and last links to jump to either end. ```html ``` ## Offset When there are too many pages to list, show only a few around the current one. ```html ``` ## Button with text Text buttons give the previous and next links a label instead of an icon. ```html ``` ## Outline version The `.pagination-outline` class draws the items with a border and no fill. ```html ``` ## Circle version The `.pagination-circle` class makes each item round. It combines with `.pagination-outline`. ```html ``` ## Pager with page names For prose - documentation, a blog, a wizard - name the pages instead of numbering them. Put `page-item-subtitle` above the title for the direction, and `page-item-title` for the name of the target page. ```html ``` ## Accessibility - Wrap the list in `

`. A page can have more than one pager, so the label is what tells them apart. - Mark the current page with `aria-current="page"` on its link, not with the `active` class alone. - Previous and next arrows need text. Keep a `visually-hidden` label, or set `aria-label="Previous"` on the link. - A disabled step is still a link. Add `aria-disabled="true"` and `tabindex="-1"` so it is skipped, since the `disabled` class only changes how it looks. - The page numbers alone do not say what they page through. Say it in the `nav` label, for example `aria-label="Search results pages"`.