Ficha
- Categoría
- Navigation
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 393:9576
- Fuente
design-system/componentes/RailItem.md
Ítem de navegación del rail: ícono en una píldora de 56×32 + palabra debajo (72×64; el ancho lo da el rail). Active = píldora blanca con Shadow/Card, ícono icons/brand/action y palabra body/xs-strong text/brand/action. Hover = píldora arena (surface/sand/03-soft), pressed = sand/04-tint, focus = anillo 2 px sobre la píldora.
Cuándo usarlo
- Las cinco secciones del Rail: Inicio · Aprender · Practicar · Evaluarme · Mi avance (reglas/05 §05.2).
Cuándo NO usarlo
- Acciones (Button/IconButton); el avatar de perfil al pie del rail; pestañas dentro de una página.
Anatomía
<a> 72×64 columna gap 4: píldora 56×32 con Icon 24 + palabra body/xs.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
label | Label | texto | Inicio |
icon | Icon | nombre de ícono / nodo | — |
active | State=active | boolean | false |
href | — | ruta de la sección | — |
Estados
default · hover · focus · pressed · active (reales; active por prop).
Accesibilidad
- Enlace con aria-current=page en el activo; la palabra es el nombre accesible; anillo de foco sobre la píldora.
Contenido
Una palabra (dos como máximo: «Mi avance»).
Errores conocidos
- El ícono en estado default usa el modo «mid» de Icon tone (icons/neutral/07-mid, el color de la palabra); en Figma el trazo está ligado a
icon/tonesin modo explícito en el componente: por confirmar con Zoren si el modo por defecto (neutral, 09-max) es el deseado.
Changelog
- 2026-10-26 · nace (T-02).