Pagination > Design update
Purpose
- Pagination feels like a visual holdover from Bootstrap and would benefit from "unboxing" and simplification. Pages where pagination exists are commonly list pages loaded with buttons, pagination adds to this effect and by simplifying can help reduce visual clutter.
- Pagination is navigational and comprised of links, but it looks like a button group, which serves a different purpose. Updating the design can help align closer to navigation conceptually.
Concept
| Type | Before | After |
|---|---|---|
| Offset |
|
|
| Compact |
|
|
| Keyset |
|
|
Inspiration
- https://carbondesignsystem.com/components/pagination/usage/
- https://rei.github.io/rei-cedar-docs/components/pagination/#
- https://eui.elastic.co/#/navigation/pagination
- https://polaris.shopify.com/components/navigation/pagination?example=pagination-with-table-type
- https://canvas.workday.com/components/navigation/pagination/
Edited by Jeremy Elder





