---
id: pagination
title: Pagination
---

# Pagination

pagination component displays a list of page numbers, and allows the user to navigate to a specific page.

## How to use

<code src="@digigov/ui/src/navigation/Pagination/__stories__/Default.tsx" />

### With inactive values

<code src="@digigov/ui/src/navigation/Pagination/__stories__/WithInactiveValues.tsx" />

### With small fonts

<code src="@digigov/ui/src/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx" />

### Dense 

<code src="@digigov/ui/src/navigation/Pagination/__stories__/PaginationSmall.tsx" />

### With results per page

<code src="@digigov/ui/src/navigation/Pagination/__stories__/WithResultsPerPage.tsx" />

## API

See below for a complete reference to all of the props available to the components mentioned here.

<ComponentProps
  componentName={[
    'Pagination',
    'PaginationLabel',
    'PaginationList',
    'PaginationListItem',
  ]}
/>