A code consisting of an array of black and white squares that is typically used to store URLs or other information for the camera on a smartphone to read. These qr codes can be easily customised using different attributes.
To use the QR component, include it in HTML with the required attributes. In HTML, kebab-case attributes are recommended (foreground-alpha, background-alpha), but camelCase aliases are also supported (foregroundAlpha, backgroundAlpha).
value: value encoded into the QR code.size: output QR size in px.padding: inner padding in px.foreground: foreground color.foreground-alpha (alias foregroundAlpha): foreground opacity in range 0-1.background: background color.background-alpha (alias backgroundAlpha): background opacity in range 0-1.level: error correction level (L, M, Q, H).
Slots:
top: content rendered above the QR code.bottom: content rendered below the QR code.
Use wje-qr-code to improve readability, scannability, and contextual understanding of content.
Do not replace structured interactive data with media-only presentation when precision is needed.
Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.
- Compress media and use lazy loading in larger collections.
- Keep information priority consistent across cards/lists.
- Avoid duplicating the same meaning in icon and text without added value.
| Description | Content encoded into the QR code. |
| Attribute | value |
| Type | string |
| Default | - |
| Description | Background color of the QR code. |
| Attribute | background |
| Type | string｜null |
| Default | - |
| Description | Background alpha channel in range 0-1. Supports aliases: background-alpha, backgroundalpha, backgroundAlpha. |
| Attribute | background-alpha |
| Type | number｜null |
| Default | - |
| Description | Foreground color of the QR code. |
| Attribute | foreground |
| Type | string｜null |
| Default | - |
| Description | Foreground alpha channel in range 0-1. Supports aliases: foreground-alpha, foregroundalpha, foregroundAlpha. |
| Attribute | foreground-alpha |
| Type | number｜null |
| Default | - |
| Description | Error correction level. Accepted values: L, M, Q, H. |
| Attribute | level |
| Type | string｜null |
| Default | - |
| Description | Padding around the QR code in pixels. |
| Attribute | padding |
| Type | number｜null |
| Default | - |
| Description | Output QR code size in pixels. |
| Attribute | size |
| Type | number｜null |
| Default | - |
No events available for this component.
| Description | Returns first defined attribute value from alias list. |
| Signature | (aliases: string[]) => string｜null |
| Description | Writes value to the canonical attribute and clears alternate aliases. |
| Signature | (optionName: string, value: string｜number｜null｜undefined) => void |
| Name | Description |
|---|
native | The native part of the QR code. |
No CSS custom properties available for this component.
| Name | Description |
|---|
top | The slot for the top content of the QR code. |
bottom | The slot for the bottom content of the QR code. |