Data & display

AppQrCode

A scannable QR code, drawn crisp at any size.

<app-qr-code value="https://example.com" size="240" />

<app-qr-code> turns a piece of text into a QR code a phone can scan: a link, an authenticator setup URI, a signed invoice token. The server encodes it with Webority.QrCode and renders inline SVG, so the page needs no script.

It always draws black on white with a clear border, whatever the theme. Scanners need that contrast, so it is not a styling choice.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the code above it.

<app-qr-code value="https://example.com/invoices/INV-1042" />

Basic

Pass the text and a largest size. The code picks the biggest whole number of pixels per square that fits, so it never blurs.

Authenticator setup
Give it a title that says what scanning does. A screen reader announces it in place of the picture.
Show code 
<app-qr-code value="@Model.OtpauthUri" size="200" title="Scan to add your account to an authenticator app" />
Long values
A 1,500-character signed token still fits. The code gets denser, so give it more room.
Show code 
<app-qr-code value="@Model.SignedToken" size="320" title="Scan to verify this invoice" />
Always offer the text tooNot everyone can scan. Put the same value beside the code with a copy button, as below.
With a copy fallback
The code for phones, the text for everyone else.
Show code 
<app-qr-code value="@Model.SetupKey" size="160" title="Scan to add your account" />
<app-copy-button text="@Model.SetupKey" />

When to use

Use it when

  • Someone needs to move a link or a code from a screen to a phone.
  • An authenticator app needs a setup key.
  • A printed or on-screen document carries a value a scanner verifies.

Reach for something else when

  • The person is already on a phone. app-link or app-copy-button
  • The value is a short code people type. app-copy-button

Best practices

Do
Enough room around it, and a title that says what scanning does.
Don't
A long value squeezed into a small box. The squares are too small to scan, and part of the code is cut off.

Every option

The whole surface of the component, one cell per value.

size

size="120"
size="180"
size="240"
size="320"

value

a URL
an otpauth URI
a 1,500-character token

title

(default) title="QR code"
title="Scan to open the site"

Attributes

AttributeTypeDefaultDescription
valuestring-The text to encode: a URL, an otpauth URI, a signed token. Nothing renders while it is empty.
sizeint240Largest width and height in px. The code renders at the biggest whole number of pixels per square that fits.
titlestringQR codeAccessible name. Say what scanning it does.