# Pagination

### Colors

The pagination of the listing has, in addition to the usual colors, colors for the different states: :hover, :active and :disabled.

{% hint style="info" %}
**Tip:** The values of the fields can be SCSS functions:

`hsl(hue($sw-border-color), saturation($sw-border-color), 89%)`

Here the color is defined per hsl format. The color angle and saturation of the border color are combined with a brightness of 89%.
{% endhint %}

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FuJMGSvvgUyuMJrIPOyxY%2Fdocs-en-config-theme-components-pagination-colors.png?alt=media\&token=9e1abb59-66e9-422b-893c-d637c27886ff)

### Basic configuration

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FyvjG68iwxYhLyTb9O5uU%2Fdocs-en-config-theme-components-pagination-basic-configuration.png?alt=media&#x26;token=65928ba0-104f-4b7a-a261-ec51f2ad3a8c" alt=""><figcaption></figcaption></figure>

The **Appearance (1)** of pagination can be represented as `pills` and `standard`. Elements defined as `pills` have a distance to each other.

The option **Hide disabled buttons (3)** hides the unnecessary disabled buttons, since they are not clickable anyway. For example, if you are on page 1, the buttons for "first page" and "page forward" are superfluous.

Example:

![Pills round](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MHX-gFJKSqYFDvkKedi%2F-MHX0CVTHk7ZPjuuQXXP%2Fdocs-front-pills.png?alt=media\&token=65b584ed-0cc0-4e77-af83-54b95b25de3c)

![Standard](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MHX-gFJKSqYFDvkKedi%2F-MHX0K0rBpbOXh9ovhdA%2Fdocs-front-pagination-standard.png?alt=media\&token=0f5c5446-4b8b-4694-afd6-08dab8d041a5)

![Pills angular](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MHX-gFJKSqYFDvkKedi%2F-MHX0d32oyZxU9i7CV7l%2Fdocs-front-pagination-pills.png?alt=media\&token=ff7a8d87-8c6a-4507-88c9-2253724cfa6e)

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FRH8A03HDTwFeYsUKDb9T%2Fdocs-de-storefront-theme-pagination-hidden-disabled-buttons.png?alt=media&#x26;token=a4563634-4f52-41fc-b874-ba11317f5e0f" alt=""><figcaption><p>Disabled buttons are hidden</p></figcaption></figure>

{% hint style="info" %}
The roundings of the pills result from the button radius from the general settings tab. For round pills your buttons must be set to `round.`
{% endhint %}