Pagination

Pagination provides a composable page-navigation pattern with previous/next helpers, page links, and an ellipsis marker.

• chevron_leftPrevious
• 1
• 2
• 3
• more_horizMore pages
• Nextchevron_right

Examples

Default

• chevron_leftPrevious
• 1
• 2
• 3
• more_horizMore pages
• Nextchevron_right

Simple

• 1
• 2
• 3
• 4
• 5

Icons Only

Rows per page
arrow_drop_down
• chevron_leftPrevious
• Nextchevron_right

Vue Router

PaginationLink, PaginationPrevious, and PaginationNext follow the same pattern: use RouterLink custom, then forward href and navigate into the pagination control.

• chevron_leftPrevious
• 1
• 2
• 3
• Nextchevron_right

Current route: /docs/page/2

Reference

Anatomy

Highlight

Element	Part	Selector
<nav>	root	[data-scope="pagination"][data-part="root"] left_clickLMBCopy
<ul>	content	[data-scope="pagination"][data-part="content"] left_clickLMBCopy
<span>	ellipsis	[data-scope="pagination"][data-part="ellipsis"] left_clickLMBCopy
<Icon>	ellipsis-icon	[data-scope="pagination"][data-part="ellipsis-icon"] left_clickLMBCopy
<span>	ellipsis-label	[data-scope="pagination"][data-part="ellipsis-label"] left_clickLMBCopy
<li>	item	[data-scope="pagination"][data-part="item"] left_clickLMBCopy
<Button>	link	[data-scope="pagination"][data-part="link"] left_clickLMBCopy
<PaginationLink>	next	[data-scope="pagination"][data-part="next"] left_clickLMBCopy
<span>	next-text	[data-scope="pagination"][data-part="next-text"] left_clickLMBCopy
<Icon>	next-icon	[data-scope="pagination"][data-part="next-icon"] left_clickLMBCopy
<PaginationLink>	previous	[data-scope="pagination"][data-part="previous"] left_clickLMBCopy
<Icon>	previous-icon	[data-scope="pagination"][data-part="previous-icon"] left_clickLMBCopy
<span>	previous-text	[data-scope="pagination"][data-part="previous-text"] left_clickLMBCopy

Pagination

Props

Name	Description	Default	Control
ariaLabelOptional	Accessible label for the pagination navigation landmark. string | undefined	"Pagination"

Slots1

Name	Parameters	Description
default	-	Pagination content, usually PaginationContent.

Styling7

Preview

Token	Description
--md-pagination-ellipsis-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls ellipsis color.
--md-pagination-ellipsis-sizeLayout Fallback--dp(40)	Controls ellipsis size.
--md-pagination-item-spaceLayout Fallback--dp(4)	Controls item space.
--md-pagination-link-min-widthLayout Fallback--dp(40)	Controls link min width.
--md-pagination-link-padding-inlineLayout Fallback--dp(12)	Controls link padding inline.
--md-pagination-nav-icon-sizeLayout FallbackTypography, density and icon scale (default reference: --dp(20))	Controls nav icon size.
--md-pagination-nav-inline-spaceLayout Fallback--dp(4)	Controls nav inline space.

PaginationContent

Slots1

Name	Parameters	Description
default	-	Pagination items.

PaginationItem

Slots1

Name	Parameters	Description
default	-	One pagination primitive, such as PaginationLink or PaginationEllipsis.

PaginationLink

Props

Name	Description	Default
isActiveOptional	Marks the current page and applies active emphasis. boolean | undefined	false
variantOptional	Button variant. Defaults to `text` and switches to `outlined` for active pages. ButtonVariant | undefined	undefined
sizeOptional	Button size variant. smalllargeextra-smallmediumextra-large	"small"
shapeOptional	Button shape variant. M3Shape | undefined	undefined
hrefOptional	Optional href. When omitted, renders as a native button. string | undefined	undefined
disabledOptional	Disabled state. boolean | undefined	false

Slots1

Name	Parameters	Description
default	-	Link content, usually a page number.

PaginationPrevious

Props

Name	Description	Default
variantOptional	Button variant. Defaults to `text` and switches to `outlined` for active pages. ButtonVariant | undefined	undefined
shapeOptional	Button shape variant. M3Shape | undefined	undefined
sizeOptional	Button size variant. smalllargeextra-smallmediumextra-large	"small"
hrefOptional	Optional href. When omitted, renders as a native button. string | undefined	undefined
disabledOptional	Disabled state. boolean | undefined	false
textOptional	Screen text shown beside the icon on larger viewports. string | undefined	"Previous"
ariaLabelOptional	Accessible label for assistive technology. string | undefined	"Go to previous page"

PaginationNext

Props

Name	Description	Default
variantOptional	Button variant. Defaults to `text` and switches to `outlined` for active pages. ButtonVariant | undefined	undefined
shapeOptional	Button shape variant. M3Shape | undefined	undefined
sizeOptional	Button size variant. smalllargeextra-smallmediumextra-large	"small"
hrefOptional	Optional href. When omitted, renders as a native button. string | undefined	undefined
disabledOptional	Disabled state. boolean | undefined	false
textOptional	Screen text shown beside the icon on larger viewports. string | undefined	"Next"
ariaLabelOptional	Accessible label for assistive technology. string | undefined	"Go to next page"

PaginationEllipsis

Props

Name	Description	Default
labelOptional	Accessible label announced for the collapsed pages marker. string | undefined	"More pages"