Pagination

Moves through long tables one page at a time.

Live React portWildPagination.vueData Display/PaginationWPagination

Try it

Click a page number or a chevron, then try 128 pages and step through the middle.

Variant

Pages

Size

Count

Disabled

<WildPagination
  v-model="page"
  variant="numbered"
  :total-pages="20"
  :total-items="493"
  :items-per-page="25"
  size="md"
/>

Past seven pages the window always holds seven equal slots, ellipses included, so the controls keep their width as you page.

Use it under a table or list that runs past one page, such as readings or alarms.
Use numbered when people jump to a page, and simple when they only step.
Pass the item total and page size, so the count says where you are.

Don’t use it

The count, then the previous chevron, the page window and the next chevron.

first page

middle

no item total

<WildPagination v-model="page" variant="numbered"
  :total-pages="128" :total-items="3193" :items-per-page="25" />

Without total-items and items-per-page, the count reads “Page 7 of 128”.

Simple is the count and the chevrons. Numbered adds the page window between them.

simple

numbered

Two. Use sm under a dense table, such as one inside a dialog or card.

md · 13px

sm · 12px

first page

last page

one page

disabled

On the first and last page, the chevron that would go nowhere is disabled but stays in place, so nothing beside it moves.

It’s a navigation landmark named Pagination. The chevrons are named Previous page and Next page, and the current page is announced as current.

Key	What it does
Tab	Moves through the chevrons and page numbers. Disabled controls are skipped.
Enter / Space	Goes to that page. At the first or last page, focus moves to the current page, or to the other chevron in simple.

Prop	Type	Default	Description
v-model	number	—	The current page, counting from 1.
total-pages	number	—	How many pages there are.
total-items	number	—	Item total, for the count.
items-per-page	number	—	Page size, for the count.
variant	'simple' \| 'numbered' \| 'compact'	'simple'	Numbered adds page numbers; compact draws as simple.
size	'sm' \| 'md'	'md'	Text at 12 or 13px; chevrons at 24 or 28px.
show-page-info	boolean	true	Shows the count before the controls.
disabled	boolean	false	Blocks every control.
@change	(page: number) => void	—	Fires with the new page.

Token	Value	Where it lands
--global-blue-1000	#1877F2	Current page fill, and the focus ring.
--global-neutral-grey-1000	#4F4D55	Page numbers, count and ellipsis.
--global-neutral-grey-900	#7F7D83	Chevrons at rest.
--global-neutral-grey-1200	#1D1C20	Page and chevron ink on hover.
--global-base-white	#FFFFFF	Current page number.
--global-neutral-grey-300	#F1F1F1	Page and chevron hover.
--global-neutral-grey-400	#ECECED	Page and chevron press.
--global-neutral-grey-800	#ADACB0	Disabled chevrons and numbers.
--global-neutral-grey-200	#F5F5F5	Current page fill when disabled.
--font-weight-semibold	500	Page numbers.
--radius-md	6px	Page number corners.