Qrcode
QR Code component is used for providing information or links to users which they can quickly scan with their smartphone.
Loading...
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
value | value | The value of the QR Code, most commonly an URL. | string | '' |
label | label | Label used by assistive technology. If unspecified, the value will be used instead. | string | '' |
size | size | The size of the rendered QR Code in pixels. | number | 128 |
color | color | The fill color of the QR Code. Can accept any valid CSS color value, including custom properties. | string | 'var(--n-color-text)' |
background | background | The background color of the QR Code. Can accept any valid CSS color value, including custom properties. | string | 'var(--n-color-surface)' |
correction | correction | Error correction level makes the QR Code bigger and helps users to scan it without issues. L, M, Q and H values will use 7%, 15%, 25% and 30% of the QR code for error correction respectively. | 'L' | 'M' | 'Q' | 'H' | 'H' |
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use to allow people to access information on their smartphone without the need to type.
- Always provide an alternative way to access the same information.
Don’t
- Don’t hide important information behind a QR Code only.
Integration
For integration guidelines, please see Web Components documentation .