Navigation
Pagination Controls
Previous and next arrows around a five-item window — either dots or page numbers — to move through a paged list or carousel.
Pagination Controls move through content split across pages — a course carousel, a list of videos. A round arrow button sits on each side of a compact indicator showing where you are.
Dots show a window of up to five dots with the current one dark. They are indicators only, and suit swipeable carousels. Numbers show up to five page numbers with the current one filled red, and each number is a button.
The window stays centered on the current page and slides as you move, clamping at the first and last pages. Figma draws only three positions per style (the first three of five); behavior at the ends of a long list follows the same rule but isn't drawn.
- Use Dots for carousels and short galleries, where position matters more than page number.
- Use Numbers for lists where people need to jump to a specific page.
- Keep the controls close to the content they page.
- Don't use it for more than a handful of pages without truncation — the window is five items.
- Don't use Dots when people must jump to an exact page; they can't be clicked.