Usa pasos para mostrar una serie de acciones o eventos secuenciales. Puedes añadir tantos pasos como necesites.
1

Primer paso

Estas son instrucciones o contenido que solo aplican al primer paso.
2

Segundo paso

Estas son instrucciones o contenido que solo aplican al segundo paso.
3

Tercer paso

Estas son instrucciones o contenido que solo aplican al tercer paso.
Steps example
<Steps>
  <Step title="Primer paso">
    Estas son instrucciones o contenido que solo aplican al primer paso.
  </Step>
  <Step title="Segundo paso">
    Estas son instrucciones o contenido que solo aplican al segundo paso.
  </Step>
  <Step title="Tercer paso">
    Estas son instrucciones o contenido que solo aplican al tercer paso.
  </Step>
</Steps>

Propiedades de Steps

children
ReactElement<StepProps>[]
required
Una lista de componentes Step.
titleSize
string
default:"p"
El tamaño de los títulos de los pasos. Puede ser p, h2 o h3.

Propiedades individuales del paso

children
string | ReactNode
required
El contenido de un paso, ya sea texto sin formato o componentes.
icon
string
El icono que se mostrará.Opciones:
  • Nombre del icono de Font Awesome
  • Nombre del icono de Lucide
  • Código SVG compatible con JSX, envuelto entre llaves
  • URL de un icono alojado externamente
  • Ruta a un archivo de icono en tu proyecto
Para iconos SVG personalizados:
  1. Convierte tu SVG con el convertidor SVGR.
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
  5. Ajusta height y width según sea necesario.
iconType
string
El estilo del icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
title
string
El título es el texto principal del paso y aparece junto al indicador.
stepNumber
number
El número del paso.
titleSize
string
default:"p"
El tamaño de los títulos del paso. Uno de p, h2 o h3.