Pagination

Pagination component for indicating a series of related content exists across multiple pages.

Playground

Experiment with the Pagination component by adjusting the props below:

Interactive Playground

Controls

Alignment

Size

Number of Pages

Count: 5

Include Disabled Item

Preview

Code

            
            <Pagination.Root>
  <Pagination.Item isDisabled={true}>
    <Pagination.Link href="#!" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
    </Pagination.Link>
  </Pagination.Item>
  <Pagination.Item isActive={true}>
    <Pagination.Link href="#!">1</Pagination.Link>
  </Pagination.Item>
  <Pagination.Item>
    <Pagination.Link href="#!">2</Pagination.Link>
  </Pagination.Item>
  <Pagination.Item>
    <Pagination.Link href="#!">3</Pagination.Link>
  </Pagination.Item>
  <Pagination.Item>
    <Pagination.Link href="#!">4</Pagination.Link>
  </Pagination.Item>
  <Pagination.Item>
    <Pagination.Link href="#!">5</Pagination.Link>
  </Pagination.Item>
  <Pagination.Item>
    <Pagination.Link href="#!" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
    </Pagination.Link>
  </Pagination.Item>
</Pagination.Root>

Basic Example

A simple pagination component consists of pagination items with links, with special styling for the active state and disabled state.

            
            <Pagination.Root>
    <Pagination.Item isDisabled={true}>
        <Pagination.Link href="#!" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

Sizing

You can use the size prop to change the size of the pagination component. Available options are "sm" for small, "lg" for large, or undefined for the default size.

Small pagination

Default pagination

Large pagination

            
            <!-- Small pagination -->
<Pagination.Root size="sm">
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

<!-- Default pagination -->
<Pagination.Root>
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

<!-- Large pagination -->
<Pagination.Root size="lg">
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

Alignment

You can use the alignment prop to change the alignment of the pagination component. Available options are "center", "end", or undefined for the default left alignment.

Default (start) alignment

Center alignment

End alignment

            
            <!-- Default (start) alignment -->
<Pagination.Root>
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

<!-- Center alignment -->
<Pagination.Root alignment="center">
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

<!-- End alignment -->
<Pagination.Root alignment="end">
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

Disabled State

You can disable the entire pagination component by setting the disabled prop to true. You can also disable individual pagination items by using the isDisabled prop on the Pagination.Item.

            
            <Pagination.Root>
    <Pagination.Item isDisabled={true}>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

API Reference

Pagination.Root Props

Name	Type	Default	Description
`alignment`	`'start' \| 'center' \| 'end'`	`undefined` (start)	Horizontal alignment of the pagination component.
`ariaLabel`	`string`	`'pagination'`	ARIA label for the pagination navigation.
`class`	`string`	`undefined`	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element.
`id`	`string`	`pagination-{uid}`	Unique ID for the pagination element.
`size`	`'sm' \| 'lg'`	`undefined`	Size of the pagination component.

Pagination.Item Props

Name	Type	Default	Description
`class`	`string`	`undefined`	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element.
`id`	`string`	`page-item-{uid}`	Unique ID for the pagination item element.
`isActive`	`boolean`	`false`	Whether the pagination item is active.
`isDisabled`	`boolean`	`false`	Whether the pagination item is disabled.

Pagination.Link Props

Name	Type	Default	Description
`ariaLabel`	`string`	`undefined`	ARIA label for the link.
`class`	`string`	`undefined`	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element.
`href`	`string`	`'#!'`	URL for the link.
`id`	`string`	`page-link-{uid}`	Unique ID for the pagination link element.

CSS Classes

The component applies Bootstrap's pagination classes based on the provided props:

pagination - Base class for the Pagination component
page-item - Applied to Pagination.Item components
page-link - Applied to Pagination.Link components
pagination-sm - Applied when size="sm"
pagination-lg - Applied when size="lg"
justify-content-center - Applied when alignment="center"
justify-content-end - Applied when alignment="end"
active - Applied to Pagination.Item when isActive=true
disabled - Applied to Pagination.Item when isDisabled=true or parent Pagination.Root has isDisabled=true