Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add qr-code

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::qr-code> renders a QR code as inline SVG, on the server.

Two consequences worth having. There is no canvas script for a content security policy to block, and the code is in the HTML rather than appearing a second after the page. And because the encoded value is known at render time, it becomes the image's accessible name — a QR code shipped as an unnamed <svg> or <canvas>, which is what most libraries produce, is nothing at all to a screen reader, to a text browser, or to anyone whose camera will not focus.

Installation

The encoder is optional:

composer require bacon/bacon-qr-code

Without it the component still renders the value it would have encoded, because that string is the readable form of the code and is what anyone who cannot scan it needs anyway.

Basic Usage

<x-aura::qr-code value="https://aura-ui.com" label="Aura UI" :size="180" />

With the value shown

Useful on a printed page, where a camera may not be the only way in.

https://aura-ui.com/docs 
<x-aura::qr-code value="https://aura-ui.com/docs" :size="150" show-value />

Props

Prop Type Default Description
value string '' What the code encodes.
label string|null null The image's accessible name. Defaults to value.
size int 200 Pixels. Minimum 48 — below that a phone cannot resolve the modules.
margin int 1 The quiet zone, in modules. Scanners need it; zero often fails to read.
showValue bool false Shows the value under the code, as a link when it is one.
caption string|null null A caption under the code, when the value is not shown.

Accessibility

  • role="img" with the value or label as the accessible name.
  • The white plate behind the code is not decoration: a dark module on a dark background is not scannable, and it keeps the contrast in dark mode.
  • A value that is a link is rendered as one; a Wi-Fi or payment string stays plain text rather than becoming an anchor that goes nowhere.