'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
QRCode
Un código QR dibujado en SVG, con un logo opcional.
import { QRCode } from '@alea/ui';
Ejemplos
QRCode
Nítido en cualquier tamaño; muestra el enlace como texto también.
Scan to open
alea.alevasquez.dev
Props
QRCode props
Un código QR dibujado en SVG, nítido en cualquier tamaño.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
valueobligatoria | string | - | Lo que contiene el código: una URL, texto, una cadena de Wi-Fi. |
background | string | '#ffffff' | Color de fondo. Por defecto blanco. |
color | string | '#111011' | Colores; oscuro sobre claro se lee mejor. |
label | string | - | Describe lo que abre, para lectores de pantalla. Por defecto "Código QR: " + value. |
level | "L" | "M" | "Q" | "H" | 'M' | Corrección de errores: L, M (por defecto), Q, H. Usa H cuando pones un logo en el centro. |
logo | ReactNode | - | Un logo o ícono en el centro (usa el nivel H). |
size | number | 160 | Tamaño en px. Por defecto 160. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
levelLMQH- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-qr.alea-qr-logo
Accesibilidad
- Una imagen con el nombre de lo que abre; muestra el enlace como texto también.
Qué hacer y qué evitar
Hacer
- Muestra el enlace como texto junto al código también.
- Deja suficiente espacio libre alrededor.
Evitar
- No lo pongas sobre un fondo recargado.
- No lo hagas más pequeño de 128 px para impresión.