Customize the button
Change the button’s appearance to match your store’s look and feel.
Apply custom styling to display Sign in with Klarna button in different colors, shapes, and sizes.
You can change the Sign in with Klarna button’s color, label, shape, and size in a way that best suits your store’s design. To modify the style of the button, edit the source code as explained in this guide.
The theme defines the button’s color. You can change the theme by setting the value of the data-theme attribute of the klarna-sign-in element.
Apart from the default pink theme, you can apply the dark theme to have the button displayed in black, or the white theme to render the white button.
The button’s default color theme is pink. As the data-theme attribute is optional, the default theme is applied both when you set the attribute to default or if you omit it from the source code altogether.
We recommend using the default theme as it’s widely recognized by Klarna customers.
Sign in with Klarna button in the default pink theme.
<klarna-sign-in data-locale='en-US' data-theme='default' />Sample code to render a pink Sign in with Klarna button.
Use the dark theme to make the button visible on light backgrounds. To apply the dark theme, set the data-theme attribute to dark.
Sign in with Klarna button in the dark theme.
<klarna-sign-in data-locale='en-US' data-theme='dark' />Sample code to render a black Sign in with Klarna button.
Use the light theme to make the button visible on dark backgrounds. To apply the light theme, set the data-theme attribute to light.
Sign in with Klarna button in the light theme.
<klarna-sign-in data-locale='en-US' data-theme='light' />Sample code to render a white Sign in with Klarna button.
You can choose from 3 different shapes for the button: default, rectangle, or pill. To control the button's shape, change the value of the data-shape attribute.
The default Sign in with Klarna button shape is a rectangle with rounded corners. To apply the default shape, set the data-shape attribute of the klarna-sign-in element to default.
Sign in with Klarna button in the default shape.
<klarna-sign-in data-locale='en-US' data-theme='default' data-shape='default'/>Sample code to render Sign in with Klarna button in the default shape.
To apply the rectangular shape with square corners, set the data-shape attribute of the klarna-sign-in element to rect.
Sign in with Klarna button in the rectangle shape.
<klarna-sign-in data-locale='en-US' data-theme='default' data-shape='rect'/>Sample code to render Sign in with Klarna button in the rectangle shape.
To apply the pill shape, set the data-shape attribute of the klarna-sign-in element to pill.
Sign in with Klarna button in the pill shape.
<klarna-sign-in data-locale='en-US' data-theme='default' data-shape='pill'/>Sample code to render Sign in with Klarna button in the pill shape.