Data Display

QrCode

Encodes a string payload as an inline SVG QR code with an explicit accessible label.

import { QrCode } from '@lostgradient/cinder/qr-code';
qr-codesharing
01

Overview

Encode a string payload as an inline, theme-aware SVG QR image with accessible labeling.

Usage

svelte 
<script lang="ts">
  import { QrCode } from '@lostgradient/cinder/qr-code';
</script>

<QrCode value="https://cinder.design" label="Scan to open the cinder website" />
Live preview
02

When to use

Use when
  • Presenting a scannable URL, token, or Wi-Fi credential that users can scan from another device.
  • You need a theme-aware QR graphic that stays crisp at any scale.
Avoid when
  • You only need to expose a copyable short text value without camera scanning affordance. Use Copy Button instead
  • The payload is sensitive and should never be displayed as machine-readable visual data.
03

Examples

Share link QR code

Render a scannable URL with an explicit accessible label.

Size and error correction

Compare QR size and recovery level for short and long payloads.

04

Props

Props for qr-code
NameTypeDefaultDescription
value required text Text payload encoded into the QR code matrix.
label text Accessible label announced for the QR image. Defaults to QR code.
size number 160 Square pixel size of the rendered QR code.
margin number 4 Quiet-zone width in QR modules.
errorCorrectionLevel 'L' | 'M' | 'Q' | 'H' 'M' QR error correction level.