Klarna Docs - Button themes and labels

Button themes and labels

Klarna offers several themes and label options to customize the appearance of the Express button so that it matches the look and feel of your website. These guidelines will help you to select between the different options available.

Theme: Default

Setting the data-theme to default or leaving it out will render the Express button in the Klarna pink theme. This is the recommended theme as it has the highest brand recognition and likelihood of usage by your customers.

MARKUP
<klarna-express-button data-locale='en-US' data-theme='default' />

Theme: Dark

Setting the data-theme to dark will render the Express button in black. It is recommended to use this theme on light backgrounds.

MARKUP
<klarna-express-button data-locale='en-US' data-theme='dark' />

Theme: Light

Setting the data-theme to light will render the express button in white. It is recommended to use this theme on dark backgrounds.

MARKUP
<klarna-express-button data-locale='en-US' data-theme='light' />

Label: Klarna

The data-label parameter value can be set to klarna. This will render the button only with the Klarna logo.

MARKUP
<klarna-express-button data-locale='en-US' data-theme='default' data-shape='default' data-label='klarna'/>

Label: Default

The data-label parameter can be unset or set to values of default which will show the default text.

MARKUP
<klarna-express-button data-locale='en-US' data-theme='default' data-shape='default' data-label='default'/>