---
title: Pagination
summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
layout: '@layouts/DocsMdxLayout.astro'
---
import Example from '@components/Example.astro';
import Pagination from '@ui/Pagination.astro';

## Basic Example

Use slightly customized pagination with previous and next icon links:

<Example centered vertical>
<Pagination />
</Example>

## With First and Last links

When you have a lot of pages, you can use first and last links to quickly navigate to the beginning or end of the pagination.

<Example centered vertical>
<Pagination firstLast />
</Example>

## Offset

If the count of pages is too large, you can use offset to show only a few pages at a time.

<Example centered vertical>
<Pagination offset={3} count={20} />
</Example>

## Button With Text

When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.

<Example centered vertical>
<Pagination text />
</Example>

## Outline version

If you want to use an outline version of the pagination, you can use the `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.

<Example centered vertical>
<Pagination class="pagination-outline" />
</Example>

## Circle version

If you want to use a circle version of the pagination, you can use the `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation. This can also be combined with the `.pagination-outline` class for a more prominent look.

<Example centered vertical separated>
<Pagination class="pagination-circle" /> <Pagination class="pagination-circle pagination-outline" />
</Example>
