> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Étapes

> Organisez du contenu en séquence avec le composant Steps

Utilisez les étapes pour présenter une série d’actions ou d’événements successifs. Vous pouvez ajouter autant d’étapes que nécessaire.

<Steps>
  <Step title="Première étape">
    Voici des instructions ou un contenu qui s’appliquent uniquement à la première étape.
  </Step>

  <Step title="Deuxième étape">
    Voici des instructions ou un contenu qui s’appliquent uniquement à la deuxième étape.
  </Step>

  <Step title="Troisième étape">
    Voici des instructions ou un contenu qui s’appliquent uniquement à la troisième étape.
  </Step>
</Steps>

```mdx Exemple de Steps
<Steps>
  <Step title="Première étape">
    Voici des instructions ou un contenu qui s’appliquent uniquement à la première étape.
  </Step>
  <Step title="Deuxième étape">
    Voici des instructions ou un contenu qui s’appliquent uniquement à la deuxième étape.
  </Step>
  <Step title="Troisième étape">
    Voici des instructions ou un contenu qui s’appliquent uniquement à la troisième étape.
  </Step>
</Steps>
```

<div id="steps-properties">
  ## Propriétés de Steps
</div>

<ResponseField name="children" type="ReactElement<StepProps>[]" required>
  Une liste de composants `Step`.
</ResponseField>

<ResponseField name="titleSize" type="string" default="p">
  La taille des titres d’étape. Valeurs possibles : `p`, `h2` ou `h3`.
</ResponseField>

<div id="individual-step-properties">
  ## Propriétés individuelles d’une étape
</div>

<ResponseField name="children" type="string | ReactNode" required>
  Le contenu d’une étape, soit sous forme de texte brut, soit sous forme de composants.
</ResponseField>

<ResponseField name="icon" type="string">
  L’icône à afficher.

  Options :

  * Nom d’icône [Font Awesome](https://fontawesome.com/icons)
  * Nom d’icône [Lucide](https://lucide.dev/icons)
  * Code SVG compatible JSX entre accolades
  * URL d’une icône hébergée en externe
  * Chemin vers un fichier d’icône dans votre projet

  Pour des icônes SVG personnalisées :

  1. Convertissez votre SVG avec le [convertisseur SVGR](https://react-svgr.com/playground/).
  2. Collez votre code SVG dans le champ de saisie SVG.
  3. Copiez l’élément complet `<svg>...</svg>` depuis le champ de sortie JSX.
  4. Mettez le code SVG compatible JSX entre accolades : `icon={<svg ...> ... </svg>}`.
  5. Ajustez `height` et `width` au besoin.
</ResponseField>

<ResponseField name="iconType" type="string">
  Le style d’icône [Font Awesome](https://fontawesome.com/icons). Utilisé uniquement avec les icônes Font Awesome.

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

<ResponseField name="title" type="string">
  Le titre est le texte principal de l’étape et s’affiche à côté de l’indicateur.
</ResponseField>

<ResponseField name="stepNumber" type="number">
  Le numéro de l’étape.
</ResponseField>

<ResponseField name="titleSize" type="string" default="p">
  La taille des titres d’étape. L’une de `p`, `h2` ou `h3`.
</ResponseField>