Skip to content
EspañolEnglish
All components (204)

QR code

Data · QRCode

What it is and when to use it

A QR code drawn in SVG, with no dependencies or image: it looks sharp at any size and prints well. The encoder (encodeQr) follows the ISO 18004 standard in byte mode (UTF-8), versions 1 to 40 and the four error-correction levels.

When to use it

  • A link scanned from a phone: the order, a ticket, the enrollment of a second factor (otpauth://…).
  • level: L 7%, M 15% (default), Q 25%, H 30% of damaged code that can still be read. A higher level makes a denser code. With a logo on top, H.

When not to

  • A long text: the more it carries, the denser and harder to read at a small size. Put a short address that leads to the rest.
  • Barcodes: this is not that format.

Keyboard: it is not interactive.

Accessibility: it is an image (role="img") and label is mandatory: it says WHAT it is, not its content in little squares. If the encoded text matters to someone who cannot scan it, put it in writing next to it too.

Fine-tuning: it always comes out black on white even if the theme is dark, because a reader needs that contrast. color and background change it at your own risk, and margin (4 modules, the minimum of the standard) should not be lowered. If value does not fit, nothing is drawn and onError warns.

What it looks like

<QRCode value="https://amset.tech/componentes/qr-code/" label="QR code for this record" size={160} />
<QRCode value={enlaceDelPedido} label="QR code to track order 1042" level="H" />

Props

Import it with import { QRCode } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
labelrequiredstringWhat is read from the drawing: "QR code for invoice F-2026-004". Required.
valuerequiredstringWhat is encoded: an address, a text, the enrollment link of a second factor.
backgroundstring—
classNamestringMerged with the library classes; it does not replace them.
colorstringColor of the modules. On a light background and very dark, or the reader cannot see it.
levelQrLevelHow much redundancy it carries. `M` (15%) by default; `H` if something is going to be placed over it.
marginnumberBlank modules around. Fewer than 4 may not be readable.
onError(error: Error) => voidNotified if `value` does not fit, instead of breaking the render.
sizenumberThe side in px.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: