Todos los componentes (204)

Código QR

Datos · QRCode

Qué es y cuándo usarlo

Un código QR dibujado en SVG, sin dependencias ni imagen: se ve nítido a cualquier tamaño y se imprime bien. El codificador (encodeQr) sigue la norma ISO 18004 en modo bytes (UTF-8), versiones 1 a 40 y los cuatro niveles de corrección.

Cuándo usarlo

Un enlace que se escanea desde el móvil: el pedido, una entrada, el alta de un segundo factor (otpauth://…).
level: L 7 %, M 15 % (por defecto), Q 25 %, H 30 % de código dañado que aún se lee. Más nivel, código más denso. Con un logo encima, H.

Cuándo no

Un texto largo: cuanto más lleva, más denso y más difícil de leer a poco tamaño. Pon una dirección corta que lleve al resto.
Códigos de barras: no es este formato.

Teclado: no es interactivo.

Accesibilidad: es una imagen (role="img") y label es obligatorio: dice QUÉ es, no su contenido en cuadraditos. Si el texto codificado importa a quien no lo puede escanear, ponlo también escrito al lado.

Aspecto fino: sale siempre negro sobre blanco aunque el tema sea oscuro, porque un lector necesita ese contraste. color y background lo cambian bajo tu responsabilidad, y margin (4 módulos, el mínimo de la norma) no conviene bajarlo. Si no cabe value, no se pinta nada y onError avisa.

Cómo se ve

<QRCode value="https://amset.tech/componentes/qr-code/" label="Codigo QR de esta ficha" size={160} />
<QRCode value={enlaceDelPedido} label="Codigo QR para seguir el pedido 1042" level="H" />

Props

Se importa con import { QRCode } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Lo que se lee del dibujo: «Codigo QR de la factura F-2026-004». Obligatorio.
`value`obligatoria	`string`	Lo que se codifica: una direccion, un texto, el enlace de alta de un segundo factor.
`background`	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`color`	`string`	Color de los modulos. Sobre fondo claro y bien oscuro, o el lector no lo ve.
`level`	`QrLevel`	Cuanta redundancia lleva. `M` (15 %) por defecto; `H` si va a llevar algo encima.
`margin`	`number`	Modulos en blanco alrededor. Menos de 4 puede no leerse.
`onError`	`(error: Error) => void`	Se avisa si `value` no cabe, en lugar de romper el render.
`size`	`number`	El lado en px.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: