Live Demo
Anatomy
Pagination gives users the ability to move forward or backward, or go directly to a specific page.
- Pagination base
- Previous page button
- Current page
- Truncation
- Next page button
Layout
States
Pagination has four states available — enabled, hover, disabled or selected. Variations -
Variations
There are two variations in pagination which are, With label and without label
Guidelines
- Use a single pagination component per page.
- Position the pagination at the bottom right corner of each page.
- Position pagination in the same place on each page.
- Pagination will appear if the number of rows exceeding ten.