# Configuration

## Basic configuration

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Navigation (default)\
• Buttons

**Example value**:\
`Navigation (default)`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Basic configuration"

**Technical name**:\
`twt-pagination-style`

{% hint style="info" %}
**Navigation**\
Default layout with combined buttons.

**Buttons**\
Layout with separated buttons.
{% endhint %}

## Colour configuration

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-color`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#bcc1c7`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-border-color`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-background-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`darken($sw-color-brand-primary, 15%)`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-hover-color`

***

### Border colour @hover

**Field type**:\
Color picker

**Example value**:\
`#bcc1c7`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-hover-border-color`

***

### Background colour @hover

**Field type**:\
Color picker

**Example value**:\
`#eeeeee`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-hover-background-color`

***

### Text colour @active

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-active-color`

***

### Border colour @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-active-border-color`

***

### Background colour @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-active-background-color`

***

### Text colour @disabled

**Field type**:\
Color picker

**Example value**:\
`#798490`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-disabled-color`

***

### Border colour @disabled

**Field type**:\
Color picker

**Example value**:\
`#bcc1c7`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-disabled-border-color`

***

### Background colour @disabled

**Field type**:\
Color picker

**Example value**:\
`#eeeeee`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Colour configuration"

**Technical name**:\
`twt-pagination-disabled-background-color`

## Layout type "Navigation"

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded\
• rounded corners (default)\
• round corners

**Example value**:\
`rounded corners (default)`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Layout type "Navigation""

**Technical name**:\
`twt-pagination-corner-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

## Layout type "Buttons"

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded\
• rounded corners\
• round corners\
• Pill

**Example value**:\
`rounded corners`

**Path to the configuration**:\
Tab "Content" => Block "Pagination" => Section "Layout type "Buttons""

**Technical name**:\
`twt-pagination-buttons-corner-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}