Klarna Docs - Button Sizing

Button Sizing

If you require custom sizing for the button on your website, the Express Button supports responsive designs and sizing within our defined ranges.

The default size of the Express button is: 

  • Width: 308px
  • Height: 50px

Supported Button Size Ranges:

  • Width: 145px to 500px
  • Height: 35px to 60px

How to resize based on fixed values

To resize the button you will need to add a class to the klarna-express-button element. You can then target this class in a custom css definition with the desired width and height.

Example:

CSS
klarna-express-button.custom-button {
  width: 236px; // min: 145px, max: 500px
  height: 47px; // min: 35px, max: 60px
}

How to resize based on page responsiveness

Much like any other element on your page, the Express Button can be resized depending on different viewports via media queries.

For example, if you want your button to use the full screen width on a screen up to 500px and otherwise have your button be 35px tall and 190px wide, you can achieve that like so:

CSS
// define this class in your default case (screen width > 500px)
klarna-express-button.custom-button {
  height: 35px;
  width: 190px;
}

@media (max-width: 500px) {
  // define this class for the case screen width <= 500px
  klarna-express-button.custom-button {
    height: 35px;

How to resize multiple buttons

If you have multiple buttons on your page and need them to be sized differently, we recommend adding a different css class to each button that requires a custom size.

Example:

MARKUP
<klarna-express-button class="custom-button-1" data-locale="en-US" data-theme="default" />
<klarna-express-button class="custom-button-2" data-locale="en-US" data-theme="default" />

And then implement your styles like so:

CSS
klarna-express-button.custom-button-1 {
  height: 35px;
  width: 190px;
}
klarna-express-button.custom-button-2 {
  height: 47px;
  width: 236px;
}