# Configuration

## Colour configuration

***

### Primary button

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Layout" => Block "Buttons" => Section "Colour configuration"

**Technical name**:\
`twt-color-primary-button`

{% hint style="info" %}
Here you can configure the background colour for the primary button.

**Text colour / hover effect:**\
According to Bootstrap, the text colour is automatically inverted from this colour value.\
For the hover effect, this colour value is automatically darkened.

Variable: **$twt-color-primary-button**
{% endhint %}

***

### Secondary button

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Layout" => Block "Buttons" => Section "Colour configuration"

**Technical name**:\
`twt-color-secondary-button`

{% hint style="info" %}
Here you can configure the background colour for the secondary button.

**Text colour / hover effect:**\
According to Bootstrap, the text colour is automatically inverted from this colour value.\
For the hover effect, this colour value is automatically darkened.

Variable: **$twt-color-secondary-button**
{% endhint %}

***

### Light button

**Field type**:\
Color picker

**Example value**:\
`#f9f9f9`

**Path to the configuration**:\
Tab "Layout" => Block "Buttons" => Section "Colour configuration"

**Technical name**:\
`twt-color-light-button`

{% hint style="info" %}
Here you can configure the background colour for the light button.

**Text colour / hover effect:**\
According to Bootstrap, the text colour is automatically inverted from this colour value.\
For the hover effect, this colour value is automatically darkened.

Variable: **$twt-color-light-button**
{% endhint %}