> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Étapes

> Créez des procédures numérotées étape par étape avec le composant steps pour guider les utilisateurs dans tâches séquentielles, tutoriels et configurations.

Utilisez des é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 Steps example theme={null}
<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 Étapes
</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`, `h3` et `h4`.
</ResponseField>

<div id="individual-step-properties">
  ## Propriétés de chaque étape
</div>

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

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

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

  Options:

  * [Font Awesome](https://fontawesome.com/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `fontawesome` dans votre `docs.json`
  * [Lucide](https://lucide.dev/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `lucide` dans votre `docs.json`
  * [Tabler](https://tabler.io/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `tabler` dans votre `docs.json`
  * URL vers une icône hébergée en externe
  * Chemin vers un fichier d’icône dans votre projet
  * Code SVG entouré d’accolades

  Pour les 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 d’entrée SVG.
  3. Copiez l’élément complet `<svg>...</svg>` depuis le champ de sortie JSX.
  4. Enveloppez le code SVG compatible JSX dans des accolades : `icon={<svg ...> ... </svg>}`.
  5. Ajustez `height` et `width` selon vos besoins.
</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="stepNumber" type="number">
  Le numéro de l’étape.
</ResponseField>

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

<ResponseField name="id" type="string">
  Un ID personnalisé pour l’étape, utilisé pour les liens d’ancrage et la navigation dans la table des matières.
</ResponseField>

<ResponseField name="noAnchor" type="boolean" default="false">
  Indique s’il faut masquer le lien d’ancrage de l’étape.
</ResponseField>