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.
  • Width: 308px
  • Height: 50px
  • Width: 145px to 500px
  • Height: 35px to 60px

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
}

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;

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;
}