Pagination
The pagination component is used to navigate pages in lists, tables, and other content views. Related design guidelines: Lists and tables
ExamplesDocumentationPagination nav inputCSS VariablesExamples
Documentation
Note: <button> or <a> elements can be used in .pf-c-pagination__nav-page-select.
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
aria-label | .pf-c-pagination__nav | Provides an accessible name for pagination navigation element. Required |
Pagination nav input
| Attribute | Applied to | Outcome |
|---|---|---|
type="number" | .pf-c-pagination > .pf-c-form-control | Defines a field as a number. Required |
value | .pf-c-pagination__nav-page-select > .pf-c-form-control | Provides initial integer value. Required |
min | .pf-c-pagination__nav-page-select > .pf-c-form-control | Provides minimum integer value. Required |
max | .pf-c-pagination__nav-page-select > .pf-c-form-control | Provides max integer value. Required |
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-pagination | <div> | Initiates pagination. |
.pf-c-pagination__current | <div> | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not .pf-m-footer. |
.pf-c-pagination__total-items | <div> | Initiates element to replace the options menu on mobile. |
.pf-c-pagination__nav | <nav> | Initiates pagination nav. |
.pf-c-pagination__nav-page-select | <div> | Initiates pagination nav page select. |
.pf-c-pagination__menu-text | <span> | Indicates text in menu dropdown. |
.pf-m-footer | .pf-c-pagination | Modifies for bottom/footer pagination component styles. |
.pf-m-compact | .pf-c-pagination | Modifies for compact pagination component styles. |
CSS Variables
| .pf-c-pagination | --pf-c-pagination--child--MarginRight | 1.5rem | ||
| .pf-c-pagination | --pf-c-pagination--m-compact--child--MarginRight | 0.5rem | ||
| .pf-c-pagination | --pf-c-pagination--c-options-menu__toggle--FontSize | 0.875rem | ||
| .pf-c-pagination | --pf-c-pagination__menu-text--PaddingLeft | 0.25rem | ||
| .pf-c-pagination | --pf-c-pagination__menu-text--FontSize | 0.875rem | ||
| .pf-c-pagination | --pf-c-pagination__menu-text--Color | #6a6e73 | ||
| .pf-c-pagination | --pf-c-pagination__nav--c-button--PaddingLeft | 0.5rem | ||
| .pf-c-pagination | --pf-c-pagination__nav--c-button--PaddingRight | 0.5rem | ||
| .pf-c-pagination | --pf-c-pagination__nav--c-button--FontSize | 1rem | ||
| .pf-c-pagination | --pf-c-pagination--m-compact__nav--c-button--MarginLeft | 1rem | ||
| .pf-c-pagination | --pf-c-pagination__nav-page-select--FontSize | 0.875rem | ||
| .pf-c-pagination | --pf-c-pagination__nav-page-select--PaddingLeft | 1rem | ||
| .pf-c-pagination | --pf-c-pagination__nav-page-select--PaddingRight | 1rem | ||
| .pf-c-pagination | --pf-c-pagination__nav-page-select--child--MarginRight | 0.25rem | ||
| .pf-c-pagination | --pf-c-pagination__nav-page-select--c-form-control--width-base | 3.5ch | ||
| .pf-c-pagination | --pf-c-pagination__nav-page-select--c-form-control--width-chars | 2 | ||
| .pf-c-pagination | --pf-c-pagination__nav-page-select--c-form-control--Width | calc(3.5ch + (2 * 1ch)) | ||
| .pf-c-pagination.pf-m-compact | --pf-c-pagination--child--MarginRight | 0.5rem | ||
