# Qr Code

> A QR code drawn as SVG and encoded on the device, so the text (a sign-in secret, an invite link) never goes to a service.

Component · Admin · Halo kit · [Live page](https://ui.twentyfirst.media/halo/components/QrCode/)

A QR code drawn as SVG and encoded on the device, so the text (a sign-in secret, an invite link)
never goes to a service.

- `value` is the text; `level` sets the error correction (L, M by default, Q, H).
- It fills its container's width, or `size`; the light quiet zone (`quiet`, default 4 modules) is
  part of the drawing.
- Dark modules on the paper colour in every theme, because scanners expect dark on light.
- `TwoFactorSetup` draws one from `qrValue` (the otpauth:// link).

## Example

```tsx
import { Card, QrCode } from "@twentyfirstmedia/halo";

export default function Preview() {
  return (
    <div className="tf-row" style={{ gap: 24, alignItems: "flex-start", flexWrap: "wrap" }}>
      <Card style={{ width: 200, minHeight: 0 }}>
        <QrCode
          value="otpauth://totp/Halo:mara%40halo.app?secret=JBSWY3DPEHPK3PXP&issuer=Halo"
          label="Authenticator setup code"
        />
        <small className="tf-muted">Scan with an authenticator app</small>
      </Card>
      <Card style={{ width: 160, minHeight: 0 }}>
        <QrCode value="https://halo.app/invite/7F3K" level="Q" label="Invite link" />
        <small className="tf-muted">Join on your phone</small>
      </Card>
    </div>
  );
}
```

## Props

### QrCode

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | The text to encode: an otpauth:// link, a URL … |
| `level?` | `"L" \| "M" \| "Q" \| "H"` | Error correction: L, M (default), Q or H. |
| `size?` | `number \| string` | Width and height (default: the width of its container). |
| `quiet?` | `number` | Light modules around the code (default 4, the standard quiet zone). |
| `label?` | `string` | Accessible name (default "QR code"). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Card

| Prop | Type | Notes |
| --- | --- | --- |
| `title?` | `string` |  |
| `description?` | `string` |  |
| `meta?` | `string[]` |  |
| `corner?` | `ReactNode` |  |
| `status?` | `ReactNode` |  |
| `actions?` | `ReactNode[]` |  |
| `tint?` | `Tint \| "surface"` |  |
| `onClick?` | `() => void` |  |
| `children?` | `ReactNode` |  |
| `eyebrow?` | `ReactNode` |  |
| `surface?` | `Surface` | `"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |