Design

​

Anatomy

1. Previous Button — moves to the prior page; disabled on the first page.
2. Page Button — numeric buttons for direct jumps.
3. Truncated Page Dropdown Button — ellipsis “⋯” that opens a jump menu for hidden ranges.
4. Next Button — moves to the next page; disabled on the last page (when total is known).
5. Items per page select — sets page size (e.g., 10/25/50/100).
6. Counter — displays the current range and total (e.g., “1 – 10 of 100 items”).

​

Options

​

Total count availability

​

Known total

​

Unknown total

​

Truncation strategy

• Max visible Page Buttons: 7 total.
• First/last pinned: pages 1 and last are always visible.
• Window: show current with up to two neighbors on each side; replace hidden ranges with a “⋯” dropdown.
• Small sets: if total pages ≤ 7, show all pages with no truncation.
• Examples:
  • Start (page 1): 1 2 3 4 5 ⋯ 100
  • End (page 100): 1 ⋯ 96 97 98 99 100
  • Middle (page 55): 1 ⋯ 54 55 56 ⋯ 100
  

​

Counter format

• Known total: “Start – End of Total items” (e.g., “1 – 10 of 100 items”).
• Unknown total: “Start – End items” (e.g., “1 – 10 items”).

​

Usage Guidelines

• Use when: users need precise jumps, totals are meaningful, or stable placement matters.
• Avoid when: content is continuous (use infinite scroll), results are very small (show all), or steps represent task progress (use a Stepper).
• Placement: place below results.
• Consistency: keep page-size presets consistent across products.

​

Content

• Counter noun (“items”) is contextual: replace items with the domain noun (e.g., orders, records, messages) to reflect what’s being paged.
  • Examples: “1 – 10 of 100 orders”, “1 – 25 of 325 records”, “1 – 1 of 1 message”.
• Singular/plural: use message (singular) when End and Total are 1; otherwise use the plural form.
• Unknown totals: when the total is unknown, omit it but keep the noun: “1 – 10 messages”.
• Formatting: use an en dash with spaces (1 – 10) and sentence case for the noun.