---
title: Vipps wallet button
description: A branded Vipps wallet call-to-action button extension.
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.142Z
checksum: 865950481ae0db0297d4e7269ac06a906ef2f61b7d70b31504c35053a498f905
---

# Vipps wallet button

## Import

```tsx
import VippsWalletButton from '@dnb/eufemia/extensions/vipps-wallet-button'
import '@dnb/eufemia/extensions/vipps-wallet-button/style'
```

## Description

A branded Vipps wallet call-to-action button extension.

It uses a primary [Button](/web/components/button/) under the hood.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/vipps-wallet-button)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/patterns-and-extensions/vipps-wallet-button)


## Demos

### Default


```tsx
render(<VippsWalletButton onClick={() => {
  console.log('VippsWalletButton clicked');
}} data-visual-test="vipps-wallet-button" />)
```


### With SubmitIndicator

Example with property `pending` set to `true`.


```tsx
render(<VippsWalletButton pending onClick={() => {
  console.log('VippsWalletButton clicked');
}} data-visual-test="vipps-wallet-button-pending" />)
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "pending": {
      "doc": "Set to `true` to show a pending state with a [SubmitIndicator](/web/forms/Form/SubmitIndicator/). The button is disabled while pending. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "[Button](/web/components/button/properties)": {
      "doc": "All button properties, except `variant` which is always set to `primary`.",
      "type": "Various",
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```


## Translations


```json
{
  "locales": [
    "da-DK",
    "en-GB",
    "nb-NO",
    "sv-SE"
  ],
  "entries": {
    "VippsWalletButton.text": {
      "nb-NO": "Legg til i",
      "en-GB": "Add to",
      "sv-SE": "Lägg till i",
      "da-DK": "Tilføj til"
    }
  }
}
```