Stepper
Indicador de progreso para flujos de múltiples pasos. Soporta dos tamaños y cuatro estados por paso: pendiente, activo, completado y error.
Estados por paso:
wait— Paso pendiente, aún no alcanzado. Número con borde gris.active— Paso en curso. Número con borde verde, título en negro.finished— Paso completado. Círculo verde con ícono de check.error— Paso con error. Círculo rojo con ícono X, texto en rojo.
Props adicionales:
showLine— Muestra u oculta la línea conectora entre pasos. Default:true.
Large · Sin línea conectora
showLine={false} — Los pasos se muestran sin la línea horizontal entre ellos.
Small · Sin línea conectora
Versión compacta sin línea conectora.
Large · Con descripciones
Tamaño por defecto. Muestra los tres estados principales: completado, activo y pendiente.
Large · Sin descripciones
Solo título y línea conectora. Ideal para flujos con pasos cortos y claros.
Large · Con error
Estado de error en un paso intermedio. El título y la descripción se muestran en rojo.
Large · Todos completados
Todos los pasos en estado finished. Todos los indicadores muestran el check verde.
Small · Con descripciones
Versión compacta para espacios reducidos o barras de progreso secundarias.
Small · Sin descripciones
Versión más compacta. Útil en headers de diálogos o wizards con espacio limitado.
4 pasos · Flujo de importación
Caso de uso real con cuatro pasos. Escenario del flujo de importación de materiales.