> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/qr-code.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# QRCode

Present text and links as QR codes.

## Basic usage


QR code

Download

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/qr-code/basic.tsx"
import { QRCode } from '@ifhover/leaf-ui';

export function QRCodeBasic() {
  return <QRCode value="https://ifhover.github.io/leaf-ui/" downloadable />;
}
```

Expand code

## More examples


Loading

QR code

Refresh after expiry

QR code

Refresh code

Custom color

QR code

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/qr-code/advanced.tsx"
import { Flex, QRCode, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function QRCodeStatus() {
  const [expired, setExpired] = useState(true);
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Space direction="vertical" align="stretch">
        <Text tone="muted">Loading</Text>
        <QRCode value="Leaf UI" size={140} status="loading" />
      </Space>
      <Space direction="vertical" align="stretch">
        <Text tone="muted">Refresh after expiry</Text>
        <QRCode
          value="Leaf UI"
          size={140}
          status={expired ? 'expired' : 'active'}
          onRefresh={() => setExpired(false)}
        />
      </Space>
      <Space direction="vertical" align="stretch">
        <Text tone="muted">Custom color</Text>
        <QRCode value="Leaf UI" size={140} color="#2463eb" />
      </Space>
    </Flex>
  );
}
```

Expand code

## Usage

value contains the encoded content. status can display a loading or expired state. Handle refresh through onRefresh and enable downloadable for SVG downloads.

## Types

Import these types for data, callbacks and refs.

```ts
import type { QRCodeProps } from '@ifhover/leaf-ui';
```

## QRCodeProps API

| Property          | Type                                 | Default                       | Description               |
| ----------------- | ------------------------------------ | ----------------------------- | ------------------------- |
| `value`           | `string`                             | Required                      | Controlled value          |
| `size`            | `number`                             | `160`                         | Size or spacing preset    |
| `color`           | `string`                             | `'var(--leaf-color-text)'`    | Color                     |
| `backgroundColor` | `string`                             | `'var(--leaf-color-surface)'` | Background color          |
| `level`           | `'L' \| 'M' \| 'Q' \| 'H'`           | `'M'`                         | QR error correction level |
| `logo`            | `string`                             | —                             | Center logo URL           |
| `logoSize`        | `number`                             | `32`                          | Center logo size          |
| `status`          | `'active' \| 'loading' \| 'expired'` | `'active'`                    | Display state             |
| `onRefresh`       | `() => void`                         | —                             | Refresh expired QR code   |
| `downloadable`    | `boolean`                            | `false`                       | Show download action      |
| `fileName`        | `string`                             | `'qrcode.svg'`                | Download filename         |