3.0.0-alpha.9 Alpha
Components

QR Code

<wa-qr-code> Since 2.0 Stable

Generates a QR code and renders it using the Canvas API.

QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc.


<div class="qr-overview">
  <wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
  <br />

  <wa-input maxlength="255" clearable label="Value">
    <wa-icon slot="prefix" name="link"></wa-icon>
  </wa-input>
</div>

<script>
  const container = document.querySelector('.qr-overview');
  const qrCode = container.querySelector('wa-qr-code');
  const input = container.querySelector('wa-input');

  customElements.whenDefined('wa-qr-code').then(() => {
    input.value = qrCode.value;
    input.addEventListener('wa-input', () => (qrCode.value = input.value));
  });
</script>

<style>
  .qr-overview {
    max-width: 256px;
  }

  .qr-overview wa-input {
    margin-top: 1rem;
  }
</style>

Examples

Colors

Use the fill and background attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.

<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white">
  <wa-icon slot="prefix" name="palette"></wa-icon>
</wa-qr-code>

Size

Use the size attribute to change the size of the QR code.

<wa-qr-code value="https://shoelace.style/" size="64">
  <wa-icon slot="prefix" name="expand"></wa-icon>
</wa-qr-code>

Radius

Create a rounded effect with the radius attribute.

<wa-qr-code value="https://shoelace.style/" radius="0.5">
  <wa-icon slot="prefix" name="circle"></wa-icon>
</wa-qr-code>

Error Correction

QR codes can be rendered with various levels of error correction that can be set using the error-correction attribute. This example generates four codes with the same value using different error correction levels.

<div class="qr-error-correction">
  <wa-qr-code value="https://shoelace.style/" error-correction="L">
    <wa-icon slot="prefix" name="shield"></wa-icon>
  </wa-qr-code>
  <wa-qr-code value="https://shoelace.style/" error-correction="M">
    <wa-icon slot="prefix" name="shield"></wa-icon>
  </wa-qr-code>
  <wa-qr-code value="https://shoelace.style/" error-correction="Q">
    <wa-icon slot="prefix" name="shield"></wa-icon>
  </wa-qr-code>
  <wa-qr-code value="https://shoelace.style/" error-correction="H">
    <wa-icon slot="prefix" name="shield"></wa-icon>
  </wa-qr-code>
</div>

<style>
  .qr-error-correction {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
</style>

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
value
value
The QR code's value.
Type string
Default ''
label
label
The label for assistive devices to announce. If unspecified, the value will be used instead.
Type string
Default ''
size
size
The size of the QR code, in pixels.
Type number
Default 128
fill
fill
The fill color. This can be any valid CSS color, but not a CSS custom property.
Type string
Default 'black'
background
background
The background color. This can be any valid CSS color or transparent. It cannot be a CSS custom property.
Type string
Default 'white'
radius
radius
The edge radius of each module. Must be between 0 and 0.5.
Type number
Default 0
errorCorrection
error-correction
The level of error correction to use. Learn more
Type 'L' | 'M' | 'Q' | 'H'
Default 'H'

CSS parts

Learn more about CSS parts.

Name Description
base The component's base wrapper.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/components/qr-code/qr-code.js';
 Coming soon! Coming soon!
    No results