UI components · Images
QR Code
Also called: QR, Scan code, Scannable code, QRCode
A black-and-white square pattern that a phone can scan to open a link, log in, pay, or add a contact. Put a line next to it saying which app to scan with and what scanning does.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd scan-to-log-in on the right side of the desktop login page: a 180×180px QR code on white with 12px of padding around it and a 32px brand logo in the middle; a title "Scan to log in" above, and one line of 13px gray text below: "Open the Acme app and scan to log in." The code expires after 2 minutes; when it does, fade the pattern to 40% opacity and cover it with a white round "↻" button and the text "QR code expired. Click to refresh." After a phone scans it, replace the code with a check mark and "Scanned. Confirm on your phone," then redirect automatically once confirmed. Add a "Log in with password" link to switch methods. When this page is opened in a mobile browser, don't show the QR code; show an "Open in app" button instead.
Send to
01Decide
Does your content look like this?
Check both columns to confirm QR Code is what you need.
Use QR Code when
- Scan-to-log-in and scan-to-pay on desktop, handing verification off to the phone
- Marketing sites and posters that invite people to download an app, follow an account, or add a support contact
- Sending the current page or a campaign link to a phone to open there
Pick something else when
The user is already on a phone. Give them an "Open in app" button or redirect directly instead of asking them to scan their own screen.
Content users need to read or type (redeem codes, order numbers). Show it as text so it's easy to copy.
There's already a clear link or button on the page that does the same thing, so a QR code adds nothing
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A mobile web page that only offers a QR code and says "scan to continue," when users can't scan their own screen
- 02
A QR code image with no explanation at all, so users don't know which app to scan with or what will happen
- 03
An expired login code that still shows normally, only erroring after it's scanned, with no refresh button
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A square QR pattern (with white space around it and maybe a logo in the middle), a title above or caption below, and for login or payment codes, an expired overlay with a refresh button and a status message after scanning.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A QR code encodes a URL or some text as a pattern of squares, and it's used to hand something off from a computer to a phone: log in by scanning, pay by scanning, download an app, follow an account or add a support contact (in China, often on WeChat), or open the current page on a phone. It usually looks like a 120 to 200px square with white space around it, sometimes a small logo in the middle, and a line below like "Scan with your phone camera to download the app." Login and payment codes expire, and when they do, the pattern fades and gets covered with "QR code expired. Click to refresh."
It's usually just an Image, but there's more to think about than with a normal image: is it big enough, is the contrast strong enough (a dark code on a light background with white space around it), what happens when it expires, and should the desktop screen change after scanning (for scan-to-login, show "Scanned. Confirm on your phone"). It often lives in a Popover (hover over "Mobile app" to see the code) or a Modal (click "Share" to open it).
A QR code is for another device to scan. If the user is already browsing on a phone, they can't scan their own screen, so on mobile, swap it for a button that opens the link directly, or a "Save image" option. Keep it at least 100px, and don't crop, stretch, or put it on a busy background. Login and payment codes need expiry and refresh, and should say which app to scan with. Consider adding the link as text under the pattern for people who can't scan.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-qrcode- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-qrcode.t-qrcode.n-qr-codeimg[alt*="二维码"]img[alt*="qr" i]img[class*="qr" i]img[src*="qrcode" i]img[src*="qr-code" i]canvas[class*="qr" i]:is([class*="qrcode" i], [class*="qr-code" i], [class*="qr_code" i]) > :is(img, canvas, svg)[aria-label*="二维码"]
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
qrcodeqr-codeqrqr-imgqr-imageqrcode-imgqrcode-imagewechat-qrcodescan-qrscan-code
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
QRCodeQRCodeSVGQRCodeCanvasQrcodeVueQrcode
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with media
- Priority
- 3 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026