Ficha
- Categoría
- Data display
- Nivel
- átomo
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 394:15756
- Fuente
design-system/componentes/StepItem.md
Un paso de una explicación corta de «cómo funciona»: ícono en círculo blanco y su texto (título opcional). Se usa en filas de 3–4 que llenan el ancho (cada uno FILL).
Cuándo usarlo
- Explicar un proceso antes de empezarlo (Practicar «Cómo funciona», onboarding, Cómo funciona de Acceso).
Cuándo NO usarlo
- Progreso real del usuario por pasos → ProgressBar / stepper.
- Listas de reglas → Callout o texto.
Anatomía
<li> columna, gap 12: círculo 40 blanco con Icon 20 · título (body/sm-strong, opcional) · descripción (body/sm).
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
icon | Icon (swap, preferidos) | nombre de ícono | — |
title | Title | texto | — |
showTitle | Show title | boolean | false |
description | Description | ≤ 2 líneas | — |
Estados
Sin estados.
Accesibilidad
- Se renderiza como
<li>; la pantalla lo mete en un<ol>(lista ordenada). El ícono es decorativo.
Contenido
Una idea por paso, ≤ 2 líneas; empieza por el actor («El cliente…», «Tú…»). 3–4 pasos, nunca más de 5.
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).