Button guidelines
See the Vipps MobilePay Design Toolkit on Figma to download variations of the buttons.
- Vipps
- MobilePay
Style
Vipps buttons are available in white text on orange.
| Rectangular button | Pill button |
|---|---|
 |  |
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 button | Pill button |
|---|---|
 |  |
 |  |
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
- English
- Norwegian
- Pay with Vipps
- Log in with Vipps
- Register with Vipps
- Continue with Vipps
- Betal med Vipps
- Logg inn med Vipps
- Registrer med Vipps
- Fortsett med 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.
👍 If you place a Vipps button next to another button, make sure the Vipps button is of equal size or larger.