# QR codes A white tile for a QR code: a scanner reads dark modules on white, so the tile stays white in the dark theme, in forced colors and on paper. ## Examples `qr` around an inline `svg`, an `img` or a `canvas`. The code keeps its own quiet zone - four modules of white round it, drawn by the code's generator; the tile adds 8 px more. `--redz-qr-size` sets the code's width, 11rem (176 px) by default. ```html

``` ### Downloaded as a picture A button with `command="--download"` and `aria-controls` naming the tile downloads its code as a PNG on white, to print on a room's door or a table's card: `data-file` names the file, `code.png` by default, and `data-size` is its side in pixels, 512. An inline `svg` is drawn through a `blob:` image, so the page's Content Security Policy needs `img-src blob:`; an `img` from another site needs that site's CORS. ```html

Download the code ``` ## Accessibility - A code is a picture of something a person may not be able to scan: give the same thing in words beside it - the address, or the secret key a 2FA app can take typed. - An `img` gets an `alt` that says what the code holds; an inline `svg` gets `role="img"` and an `aria-label`. - Forced colors leave the tile alone, so the code is never inverted. ## Tokens From [`css/components/qr.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/qr.css), which declares no custom property of its own. It reads the theme's `--redz-space-8`, `--redz-border`, `--redz-radius-8`, `--redz-qr-size`.