Default
Show the codeHide the code
Default, code
<WalletButton kind="google-pay" />WalletButton
An express-pay button. Google Pay places Google's own button artwork, unmodified; System stands in for a button the platform draws (Apple Pay must come from Apple's API, never recreated).
- Pro
- Version 2.0.0-rc.1
- APG pattern: Button
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
System
Show the codeHide the code
System, code
<WalletButton kind="system" label="Apple Pay" />Express checkout
Show the codeHide the code
Express checkout, code
<div className="flex flex-col">
<WalletButton kind="google-pay" />
<WalletButton kind="system" label="Apple Pay" />
</div>Tokens
The 8 design tokens WalletButton reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 8 tokens
| Token | Value now | CSS variable |
|---|---|---|
| button.disabled.bg | … | --sd-button-disabled-bg |
| button.disabled.fg | … | --sd-button-disabled-fg |
| button.padding-x.lg | … | --sd-button-padding-x-lg |
| color.action.neutral-pressed | … | --sd-color-action-neutral-pressed |
| color.bg.inverse | … | --sd-color-bg-inverse |
| color.text.inverse | … | --sd-color-text-inverse |
| radius.full | … | --sd-radius-full |
| shape.radius-control | … | --sd-shape-radius-control |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/wallet-buttonThen import it
import { WalletButton } from "@/components/ui/wallet-button"Props
| Prop | Type | What it does |
|---|---|---|
kindrequired | 'google-pay' | 'system' | google-pay: Google's own button artwork, unmodified. system: a button the platform draws (Apple Pay must come from Apple's API, never recreated). |
label | string | The accessible name. For google-pay it matches the artwork's text: "Buy with Google Pay" (the default). For system it is also the stand-in's visible text (default "Express checkout"). |
children | ReactNode | system: the platform's own button element (Apple Pay JS's apple-pay-button, PaymentRequest UI), mounted in place of the stand-in. google-pay: the Pay API's createButton() result, if you mount it yourself. |
When to use it
Use it for
- Express checkout above the card form
- A wallet option beside the card form on a payment step
Use something else for
- Restyling a vendor button: use the vendor artwork as supplied
- Showing that a wallet is accepted (a mark in a list): use the vendor's acceptance mark as an image
Accessibility
Screen readers announce "Buy with Google Pay, button".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 2.1.3, 2.4.13, 2.5.5, 2.5.6.
Stays 48px tall in Compact: the vendor artwork is never scaled down.
What your product still has to do
- In production, mount the Pay API's own button (Google Pay createButton(), Apple Pay JS) as children; the artwork here is for designs and prototypes
- Keep every wallet at least as large as the other payment options
- Use only Google's button types and wording; never translate "Google Pay"
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 80 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 60 text runs: 0 below 7:1, lowest 16.71:1 |
| Target size | 28 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 36 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 2 of 2, Firefox 2 of 2, WebKit 2 of 2 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab moves to the Google Pay button |
| Tab | Tab moves to the platform stand-in |
In Figma
The Figma component is WalletButton, with Kind (Google Pay, System); State (Default, Focus). The Figma library isn’t published yet.
Figma to code: Kind → kind (Google Pay = "google-pay", System = "system"); State (Default, Focus; preview only); Label → label.