Data Display

QRCode

View in Figma

A QR code on a rounded card, used to display a wallet or receive address for quick scanning. The card frames the code with consistent padding and corner radius so it drops cleanly into a receive or share flow.

Overview

A QR code on a rounded card, used to display a wallet or receive address for quick scanning. The card frames the code with consistent padding and corner radius so it drops cleanly into a receive or share flow.

Variants and states

default
default

Anatomy

QRCode
  1. 1Container  required
  2. 2Code  required

Measurements

Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Container
Corner radius
radiusMd
12pt
Padding
spacingPaddingXl
16pt
Card fill
colorBackgroundElevatedSecondary
#F3F3F6
Code
QR module color
colorContentPrimary
#0C1828

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues

Accessibility

Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.