logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.2
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

QRCode

Components that can convert text into QR codes, and support custom color and logo.
Importimport { QRCode } from "antd";
Sourcecomponents/qr-code
Docs
Edit this pageChangelog
Versionsupported since 5.1.0

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

When To Use

Used when the text needs to be converted into a QR Code.

Examples

API

Common props ref:Common props

This component is available since antd@5.1.0

PropertyDescriptionTypeDefaultVersion
valuescanned textstring-
typerender typecanvas | svg canvas5.6.0
iconinclude image url (only image link are supported)string-
sizeQRCode sizenumber160
iconSizeinclude image sizenumber | { width: number; height: number }405.19.0
colorQRCode Colorstring#000
bgColorQRCode Background Colorstringtransparent5.5.0
borderedWhether has border stylebooleantrue
errorLevelError Code Level'L' | 'M' | 'Q' | 'H' M
statusQRCode statusactive | expired | loading | scannedactivescanned: 5.13.0
statusRendercustom status render(info: \[StatusRenderInfo](/components/qr-code-cn#statusrenderinfo)) => React.ReactNode5.20.0
onRefreshcallback() => void-

StatusRenderInfo

typescript
type StatusRenderInfo = {
status: QRStatus;
locale: Locale['QRCode'];
onRefresh?: () => void;
};

Design Token

Global TokenHow to use?

FAQ

About QRCode ErrorLevel

The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.

Generally, the QR code is divided into 4 error correction levels: Level L can correct about 7% errors, Level M can correct about 15% errors, Level Q can correct about 25% errors, and Level H can correct about 30% errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.

For more information, see the: https://www.qrcode.com/en/about/error_correction

⚠️⚠️⚠️ Cannot scan the QR code?

If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels.

You can configure the QR code to be larger through size, or shorten the link through short link services.

base

Basic Usage.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
other status

The status can be controlled by the value status, four values ​​of active, expired, loading, scanned are provided.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Custom Render Type

Customize the rendering results by type, provide options canvas and svg.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Custom Color

Custom Color.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Error Level

set Error Level.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
With Icon

QRCode with Icon.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
custom status render

You can control the rendering logic of the QR code in different states through the value of statusRender.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
5.20.0
Custom Size

Custom Size.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Download QRCode

A way to download QRCode.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Advanced Usage

With Popover.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code

QR code expired

Scanned

Loading...

QR code expired

Scanned