# Étapes (/fr/components/steps)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 946 · updated: 2026-07-30 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md)

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 title="Steps example"
<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 [#propriétés-de-étapes]
</div>

<ResponseField name="children" type="ReactElement<StepProps>[]">
  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 [#propriétés-de-chaque-étape]
</div>

<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="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>