Klarna Docs - System-provided button

System-provided button

This guide provides guidelines on how to implement the Sign in with Klarna system-provided button button. This button design matches Klarna’s brand guidelines and has some customizable elements to suit your platform's design.

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 dark theme, you can apply the light theme to have the button displayed in white, or the outlined theme to render the white button with an outline.

An image showing all available themes that can be applied to the standard Sign in with Klarna button: Dark (default), Light, and Outlined.

Apply styling to display the standard Sign in with Klarna button in different colors.

The button’s default theme color is dark. 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 and looks good on light backgrounds.

An image showing the Sign in with Klarna button in the default dark theme with a black background. The button text is "Continue with Klarna".

Sign in with Klarna button in the default dark theme.

HTML
<klarna-sign-in data-locale='en-US' data-theme='default' />

Sample code to render the default 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.

An image showing the Sign in with Klarna button in the light theme with a white background and pink Klarna logo. The button text is "Continue with Klarna".

Sign in with Klarna button in the light theme.

HTML
<klarna-sign-in data-locale='en-US' data-theme='light' />

Sample code to render a white Sign in with Klarna button.

Use the outlined theme to make the button visible on all backgrounds. To apply the this theme, set the data-theme attribute to outlined.

An image showing the Sign in with Klarna button in the outlined theme with a white background, a black button outline, and pink Klarna logo. The button text is "Continue with Klarna".

Sign in with Klarna button in the outlined theme.

HTML
<klarna-sign-in data-locale='en-US' data-theme='outlined' />

Sample code to render a white, outlined Sign in with Klarna button.

There are three shapes available with the Sign in with Klarna button: default, rectangle, or pill. To control the button's shape, change the value of the data-shape attribute. Customize the shape of the button to best suit your platform’s look and feel.

An image showing all available shapes that can be applied to the Sign in with Klarna button: Rounded corners (default), Rectangular, and Pill.

Apply styling to display the standard Sign in with Klarna button in different shapes.

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.

An image showing the standard Sign in with Klarna button in the default shape with rounded corners. The button text is "Continue with Klarna".

Sign in with Klarna button in the default shape with rounded corners.

HTML
<klarna-sign-in data-locale='en-US' 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.

An image showing the standard Sign in with Klarna button in the rectangular shape with sharp corners. The button text is "Continue with Klarna".

Sign in with Klarna button in the rectangular shape.

HTML
<klarna-sign-in data-locale='en-US' data-shape='rect'/>

Sample code to render Sign in with Klarna button in the rectangular shape.

To apply the pill shape, set the data-shape attribute of the klarna-sign-in element to pill.

An image showing the standard Sign in with Klarna button in the pill shape. The button text is "Continue with Klarna".

Sign in with Klarna button in the pill shape.

HTML
<klarna-sign-in data-locale='en-US' data-shape='pill'/>

Sample code to render Sign in with Klarna button in the pill shape.

There are three ways you can choose to show the Klarna trademark on the button: badge, left icon or centered icon. To control the button's alignment, change the value of the data-logo-alignment attribute.

An image showing all available shapes that can be applied to the standard Sign in with Klarna button: Badge (default), left icon, and centered icon.

Apply styling to choose how the Klarna badge or icon is displayed on the Sign in with Klarna button.

The default Sign in with Klarna button alignment is the Klarna badge centered with text before. To apply the default shape, set the data-logo-alignment attribute of the klarna-sign-in element to default.

An image showing the standard Sign in with Klarna button with the default Klarna logo alignment. The button text is "Continue with Klarna".

Sign in with Klarna button with the default Klarna logo placement.

HTML
<klarna-sign-in data-locale='en-US' data-logo-alignment='default'/>

Sample code to render Sign in with Klarna button with the default badge alignment.

If you prefer to use the Klarna icon aligned to the left of the button, set the data-logo-alignment attribute of the klarna-sign-in element to left.

An image showing the standard Sign in with Klarna button with the Klarna badge aligned to the left. The button text is "Continue with Klarna".

Sign in with Klarna button with the Klarna icon aligned to the left.

HTML
<klarna-sign-in data-locale='en-US' data-logo-alignment='left'/>

Sample code to render Sign in with Klarna button with the Klarna icon aligned to the left.

If you prefer to position the Klarna icon to the center with the text trailing, set the data-logo-alignment attribute of the klarna-sign-in element to center.

An image showing the standard Sign in with Klarna button with the Klarna badge aligned to the center. The button text is "Continue with Klarna".

Sign in with Klarna button with the Klarna icon aligned to the center.

HTML
<klarna-sign-in data-locale='en-US' data-logo-alignment='center'/>

Sample code to render Sign in with Klarna button with the icon aligned to the centre.