Skip to main content
Usa pasos para mostrar una serie de acciones o eventos secuenciales. Puedes agregar tantos pasos como necesites.
1

Primer paso

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

Segundo paso

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

Tercer paso

Estas son instrucciones o contenido que solo corresponden al tercer paso.
Steps example

​
Propiedades de Steps

​
ReactElement<StepProps>[]
requerido
Una lista de componentes Step.
​
string
predeterminado:"p"
El tamaño de los títulos de los pasos. Uno de p, h2, h3 y h4.

​
Propiedades individuales del paso

​
string
requerido
El título es el texto principal del paso y aparece junto al indicador.
​
string | ReactNode
El contenido de un paso, ya sea texto sin formato o componentes.
​
string
El ícono que se mostrará.Opciones:
  • Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
  • Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
  • Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.json
  • URL de un ícono alojado externamente
  • Ruta a un archivo de ícono en tu proyecto
  • Código SVG envuelto entre llaves
Para íconos SVG personalizados:
  1. Convierte tu SVG con el convertidor de 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.
​
string
El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
​
number
El número del paso.
​
string
predeterminado:"p"
el tamaño de los títulos de los paso. uno de p, h2, h3 y h4.
​
string
Un ID personalizado para el paso, usado para enlaces de anclaje y la navegación de la tabla de contenido.
​
boolean
predeterminado:"false"
Si se debe ocultar el enlace de anclaje del paso.