> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.manicule.dev/es/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://mintlify.manicule.dev/es/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://mintlify.manicule.dev/api/mcp.
> Every agent surface: https://mintlify.manicule.dev/.well-known/llms-manifest.json

# Pasos (/es/components/steps)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 916 · updated: 2026-07-31 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md)

> Crea procedimientos numerados paso a paso con el componente steps para guiar a los usuarios en tareas secuenciales, tutoriales y configuraciones.

Usa pasos para mostrar una serie de acciones o eventos secuenciales. Puedes agregar tantos pasos como necesites.

<Steps>
<Step title="Primer paso">Estas son instrucciones o contenido que solo corresponden al primer paso.</Step>

<Step title="Segundo paso">Estas son instrucciones o contenido que solo corresponden al segundo paso.</Step>

<Step title="Tercer paso">Estas son instrucciones o contenido que solo corresponden al tercer paso.</Step>
</Steps>

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

<div id="steps-properties">
  ## Propiedades de Steps
</div>

<ResponseField name="children" type="ReactElement<StepProps>[]" required>Una lista de componentes `Step`.</ResponseField>

<ResponseField name="titleSize" type="string" default="p">El tamaño de los títulos de los pasos. Uno de `p`, `h2`, `h3` y `h4`.</ResponseField>

<div id="individual-step-properties">
  ## Propiedades individuales del paso
</div>

<ResponseField name="title" type="string" required>El título es el texto principal del paso y aparece junto al indicador.</ResponseField>

<ResponseField name="children" type="string | ReactNode">El contenido de un paso, ya sea texto sin formato o componentes.</ResponseField>

<ResponseField name="icon" type="string">
  El ícono que se mostrará.

  Opciones:

  * Nombre del ícono de [Font Awesome](https://fontawesome.com/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `fontawesome` en tu `docs.json`
  * Nombre del ícono de [Lucide](https://lucide.dev/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `lucide` en tu `docs.json`
  * Nombre del ícono de [Tabler](https://tabler.io/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `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](https://react-svgr.com/playground/).
  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.
</ResponseField>

<ResponseField name="iconType" type="string">
  El estilo de ícono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con íconos de Font Awesome.

  Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="stepNumber" type="number">El número del paso.</ResponseField>

<ResponseField name="titleSize" type="string" default="p">el tamaño de los títulos de los paso. uno de `p`, `h2`, `h3` y `h4`.</ResponseField>

<ResponseField name="id" type="string">Un ID personalizado para el paso, usado para enlaces de anclaje y la navegación de la tabla de contenido.</ResponseField>

<ResponseField name="noAnchor" type="boolean" default="false">Si se debe ocultar el enlace de anclaje del paso.</ResponseField>