'/%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
IconTile
Un ícono en un cuadro tintado: la cara de una tarjeta de función, una colección o una integración, o la marca de una app junto a su nombre.
import { IconTile } from '@alea/ui';
Ejemplos
Tonos y tamaños
soft para funciones, solid para una marca; gradient para un logo; xs va junto a un nombre en un menú, sm en un navbar, lg encabeza una tarjeta.
Tarjetas de funciones
El tile es decorativo: el título de al lado dice qué es.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-accent-on…--alea-accent-strong…--alea-gradient-accent…--alea-status-danger…--alea-status-info…--alea-status-success…--alea-status-warning…--alea-text…
Radius
--alea-radius-md…--alea-radius-sm…
Props
IconTile props
Un ícono en un cuadro tintado: la cara de una tarjeta de función, una colección, una integración o la marca de una app.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
iconobligatoria | ReactNode | - | El ícono (un ícono de Lucide o cualquier SVG de 24 px). Decorativo: di lo que significa en el texto de al lado. |
className | string | - | Clases extra para el elemento raíz. |
shape | "square" | "circle" | 'square' | Cuadrado con esquinas redondeadas (por defecto) o un círculo. |
size | "sm" | "md" | "lg" | "xs" | 'md' | xs (20 px, junto a un nombre en un menú), sm (28 px, un logo en un navbar), md (40 px, por defecto) o lg (48 px). |
tone | "danger" | "neutral" | "accent" | "success" | "warning" | "info" | 'accent' | El color. Por defecto accent. |
variant | "soft" | "solid" | "gradient" | 'soft' | soft (un cuadro tintado, por defecto), solid (relleno, para una marca) o gradient (el degradado del acento, para la marca de un producto). |
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
shapesquarecirclesizesmmdlgxstonedangerneutralaccentsuccesswarninginfovariantsoftsolidgradient- 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-icon-tile- Atributos data
data-size=xsdata-size=smdata-size=lgdata-shape=circledata-tone=neutraldata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-variant=soliddata-tone=accentdata-variant=gradient
Accesibilidad
- Decorativo: oculto para lectores de pantalla. Di lo que significa en el texto de al lado.
- Los tonos mantienen 3:1 contra su tinte en todos los looks.
Qué hacer y qué evitar
Hacer
- Usa solid para una marca y soft para funciones.
- Mantén un tono por lista salvo que el tono signifique algo.
Evitar
- No lo hagas la única forma de distinguir elementos.
- No lo conviertas en botón: usa IconButton.
En Figma
Icon tile con Tone, Variant (soft, solid), Size (sm, md, lg) y Shape.