Pagination

Root · Item · Ellipsis · FirstTrigger · PrevTrigger · NextTrigger · LastTrigger

#Ellipsis

Prop	Type	Default	Description
`index`	`number`		—

A styled part — no props of its own; it takes the anatomy's shared styling.

Prop	Type	Default	Description
`type`	`"page"`		—
`value`	`number`		—

A styled part — no props of its own; it takes the anatomy's shared styling.

A styled part — no props of its own; it takes the anatomy's shared styling.

A styled part — no props of its own; it takes the anatomy's shared styling.

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder every page seal shares.
`count`	`number`		Total number of data items
`defaultPage`	`number`	`1`	The initial active page when rendered. Use when you don't need to control the active page of the pagination.
`defaultPageSize`	`number`	`10`	The initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination.
`getPageUrl`	`(details: pagination.PageUrlDetails) => string`		Function to generate href attributes for pagination links. Only used when `type` is set to "link".
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; ellipsis(index: number): string; prevTrigger: string; nextTrigger: string; item(page: number): string; }>`		The ids of the elements in the accordion. Useful for composition.
`page`	`number`		The controlled active page
`pageSize`	`number`		The controlled number of data items per page
`siblingCount`	`number`	`1`	Number of pages to show beside active page
`translations`	`pagination.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states
`type`	`'button' \| 'link'`	`"button"`	The type of the trigger element

Event	Payload
`pageChange`	`details: PageChangeDetails`
`update:page`	`page: number`
`pageSizeChange`	`details: PageSizeChangeDetails`
`update:pageSize`	`pageSize: number`