Pagination

Beam Pagination. Source in Figma: 2.0/Pagination.

Use Default when the list can jump to a page. Use Minimal when only Previous / Next and a “Page of” status are needed. Use Button group when Previous, numbers, and Next should read as one control. Compact drops labels on the group and is for narrow viewports. Arrows only has three pairs: left/right side-by-side, up/down side-by-side, and up/down stacked. Home personal cards use the stacked pair. Product Finder still uses a simpler Previous / Next pair on View all — these types are here for review.

Type

Default desktop. Previous and Next at the ends, page numbers in the middle. Current page uses the brand tint.

Minimal

Page status with Previous and Next. Three alignments.

Right aligned · Status on the left. Previous and Next on the right.

Left aligned · Previous and Next on the left. Status on the right.

Center aligned · Previous, status, and Next share the bar.

Button group

Joined Previous, numbers, and Next. Current page uses a quiet fill. Three alignments.

Right aligned

Left aligned

Center aligned

Compact

Narrow bar for small viewports. Default drops the numbers. Button group keeps icon-only Previous and Next. Arrows only is the smallest pair — side-by-side left/right, side-by-side up/down, or stacked up/down for vertical carousels.

Default · compact

Button group · compact

Arrows only · left / right

Arrows only · up / down · side by side

Arrows only · up / down · stacked