QrCode
Encodes a URL or short text into a scannable SVG QR code
Category: display · WCAG 2.2-AA · qr, qr-code, barcode, encode, display
States
- default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Text or URL to encode |
size | number | 128 | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
errorCorrection | 'L' | 'M' | 'Q' | 'H' | M | Higher levels tolerate more damage but hold less data |
radius | string | — | CSS length rounding the corners |
fill | string | currentColor | Foreground color of the QR modules. |
background | string | transparent | Background color behind the QR code. |
ariaLabel | string | — | Alias of `label` — the same invisible accessible name under the catalog spelling. Neither is deprecated. |
label | string | — | Accessible name for the QR image. Not rendered — screen readers only. |
Design tokens
--cascivo-color-text
When to use
- Letting users scan a URL, contact, or short token with a phone camera
- Bridging print or screen to a digital destination
- Sharing a link where typing it would be error-prone
When not to use
- Encoding long or sensitive payloads — QR codes are public and capacity-limited
- Where a plain, copyable link or button is more accessible
How to build an accessible QrCode in React →
Examples
URL
<QrCode value="https://cascivo.dev" />High error correction
<QrCode value="https://cascivo.dev" errorCorrection="H" size={200} />Custom colors
<QrCode value="cascivo" fill="var(--cascivo-color-accent)" background="var(--cascivo-color-surface)" />Related components
- CopyButton — Offer a copyable link alongside the QR code for non-camera contexts