Skip to main content

Button guidelines

Style

Vipps buttons are available in white text on orange.

Rectangular buttonPill button
Rectangular orange - ENPill orange - EN

Exceptions (WCAG AAA)

Our buttons with white text meet the Web Content Accessibility Guidelines (WCAG) demands for AA (mid-range). If your website must meet the WCAG AAA (the highest accessibility range), you are allowed to render our buttons in higher contrast, either white or black background. Use prefers-contrast and -ms-high-contrast CSS media queries to detect if your users have settings that request high contrast.

Rectangular buttonPill button
Rectangular white - ENPill white - EN
Rectangular black - ENPill black - EN

This exception only applies to color. Don't create your own Vipps or MobilePay buttons or alter the font, button radius, or padding within the button in any other way.

Approved verbs

  • Pay with Vipps
  • Log in with Vipps
  • Register with Vipps
  • Continue with Vipps

Best practices

✅ Do

  • Use only the buttons provided by Vipps.
  • Use the same style of button throughout your site.
  • The button text should only use a verb approved by Vipps.
  • Ensure that the size of the Vipps buttons remains equal to or larger than other buttons.
  • Ensure that you choose a background color that contrasts with the button color.

🔥 Don’t

  • Don't create your own Vipps buttons or alter the font, color, button radius, or padding within the button in any way.
  • Don't use Vipps buttons to initiate any action other than a flow controlled by Vipps (either opening our app or a landing page).
  • Don't make the Vipps button smaller than other buttons.
  • Don't use a background color that's similar to the button color.
  • Don't add hover effects.
  • Don't add stroke.

Cart with two buttons

👍 If you place a Vipps button next to another button, make sure the Vipps button is of equal size or larger.

Help us improve our documentation

Did you find what you were looking for?