# QR code
> Generated from qr-code.contract.json — do not edit by hand.

A scannable QR code — a join link, a deck URL, a Wi-Fi handoff — rendered through the shared QRCode.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: audience, editor, dashboard.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | string | `—` | The URL or text to encode |
| `size` | number | `160` | Rendered pixel size |
| `errorLevel` | L | M | Q | H | `M` | Error-correction level |
| `status` | active | expired | loading | scanned | `active` | Render state — expired/scanned overlay a mask, loading shows a spinner |
| `icon` | string | `—` | Optional centre logo URL |
| `color` | string | `#1A1A1A` | Module colour (defaults to ink) |
| `bgColor` | string | `#FFFFFF` | Module background (kept white per DS) |
| `bordered` | boolean | `false` | antd's own 1px frame — off, so the .aha-qr container owns the DS frame |

## Visual standard (measured)
- Modules: ink #1A1A1A on white #FFFFFF (color / bgColor)
- Frame: 1px #E3E3E3 border · radius 8 · padding 16
- Size: 160 default (set via size)
- Error level: M default (L / M / Q / H)
- Status: active default (active / expired / loading / scanned)
- Bordered: off — the .aha-qr frame supplies the DS border (antd's own bordered defaults on)

## When to use
- **QR code** — a link people scan from a screen with a phone — a join code, a deck URL, an app download
- **a plain link** — the destination is clicked, not scanned

Keep the encoded value short so the code stays low-density and scans fast. Always show the human-readable link or join code beside it as a fallback.