# QrCode

> A QR code a phone can scan, drawn from the rows `Qr.Encode(text)` answers: dark modules on white whatever the theme, inside the four-module white margin a reader needs to find it. `module` is one module's side in pixels and `label` is what a screen reader says it is.

<!-- id: ui-qr-code · area: ui · stability: stable · html: https://osysharp.com/reference/ui/qr-code/ -->

## Summary        {#summary}

`Qr.Encode(text)` makes the code on the server; `QrCode(rows)` draws it. The text a code carries is usually made on the
server too — a sign-in key, a payment's token, a link with a secret in it — so the page is sent the rows:

```osy title="a link to open on a phone" test app=ui-qr-code
[AllowAnonymous]
List<string> CodeFor(string link) => Qr.Encode(link);

[Route("/share")] [AllowAnonymous]
component SharePage() {
  List<string> rows = [];
  on mount { rows = CodeFor("https://example.com/menu"); }
  render {
    Stack(gap: 3, p: 6) {
      Text("Open the menu on your phone");
      QrCode(rows, module: 5, label: "QR code for the menu");
    }
  }
}
```

## Signature      {#signature}

```osy syntax
QrCode(List<string> rows, int module = 4, string label = "QR code")
```

## Description    {#description}

### Why is it white in a dark theme?   {#colours}

A camera looks for three dark finder squares on a light ground. A code drawn in a dark theme's ink — light on dark —
or cropped tight against a dark card is read by almost nothing, so `QrCode` is the one control that does not take the
theme's colours: its modules are near-black on white, and the white margin around them is four modules wide, as the
standard asks.

### How big is it?   {#size}

`module` pixels a module, plus the margin: a 25-module code at `module: 4` is (25 + 8) × 4 = 132 pixels across. Pick a
module of 4 or more for a screen held up to a phone; it never grows to fill its container, and shrinks no further than
its own width.

### How do I find it in a test?   {#test}

By its label: `Assert.Visible("QR code for the menu")`. `osy test --pixels` with `Ui.Shot` photographs it, which is
the only way to see that it is drawn.

## See also       {#see-also}

- [Qr.Encode](https://osysharp.com/reference/function/qr-encode/) — the rows, and how the code is made
- [control — foreign UI controls (charts, grids, maps)](https://osysharp.com/reference/ui/controls/) — the rest of the kit