ant-design/components/qr-code/index.en-US.md

category	title	cover	coverDark	demo	group	tag
Components	QRCode	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original	cols 2	title order Data Display 5	New

Components that can convert text into QR codes, and support custom color and logo. Available since antd@5.1.0.

When To Use

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

Examples

base With Icon other status Custom Render Type Custom Size Custom Color Download QRCode Error Level Advanced Usage

API

Common props ref：Common props

This component is available since antd@5.1.0

Property	Description	Type	Default	Version
value	scanned text	string	-
type	render type	canvas | svg	canvas	5.6.0
icon	include image url (only image link are supported)	string	-
size	QRCode size	number	128
iconSize	include image size	number	32
color	QRCode Color	string	#000
bgColor	QRCode Background Color	string	transparent	5.5.0
bordered	Whether has border style	boolean	true
errorLevel	Error Code Level	'L' | 'M' | 'Q' | 'H'	M
status	QRCode status	active | expired | loading	active
onRefresh	callback	() => void	-

Design Token

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