QR Code Component

Usage

QR Code renders a scannable code for a value (a URL or text). Provide a label for the accessible name.

import "@nordhealth/components/lib/Qrcode"

A plain QR code from a value, with no label or styling overrides.

Override the foreground color and background to match your surface (keep enough contrast to stay scannable).

Higher correction levels (L, M, Q, H) stay scannable with more damage or overlay, at the cost of density.

Set an explicit size (in pixels) when you need a specific dimension.

Provide a label describing what the code links to, so it has an accessible name.
Keep strong contrast between color and background; low-contrast codes may fail to scan and are hard to see.
Pair the code with a visible text link or instructions where possible, so people who can't scan it still have a path.

QR Code component is used for providing information or links to users which they can quickly scan with their smartphone.

<nord-qrcode></nord-qrcode>

Property	Attribute	Description	Type	Default
`value`	`value`	The value of the QR Code, most commonly an URL.	`string`	`''`
`label`	`label`	Label used by assistive technology. If unspecified, the value will be used instead.	`string`	`''`
`size`	`size`	The size of the rendered QR Code in pixels.	`number`	`128`
`color`	`color`	The fill color of the QR Code. Can accept any valid CSS color value, including custom properties.	`string`	`'var(--n-color-text)'`
`background`	`background`	The background color of the QR Code. Can accept any valid CSS color value, including custom properties.	`string`	`'var(--n-color-surface)'`
`correction`	`correction`	Error correction level makes the QR Code bigger and helps users to scan it without issues. L, M, Q and H values will use 7%, 15%, 25% and 30% of the QR code for error correction respectively.	`'L' \| 'M' \| 'Q' \| 'H'`	`'H'`

Design guidelinesFor designers

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Use to allow people to access information on their smartphone without the need to type.
Always provide an alternative way to access the same information.