# Prompt (/fr/components/prompt)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1234 · 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 le composant Prompt pour afficher des prompts d’IA prédéfinis que les utilisateurs peuvent copier dans le presse-papiers ou ouvrir directement dans [Cursor](https://www.cursor.com).

<div id="examples">
  ## Exemples [#exemples]
</div>

<Prompt description="Générez une documentation claire et concise.">
  Vous êtes un **assistant en rédaction technique**. Rédigez une documentation claire, précise et concise.

  * Utilisez la deuxième personne ("vous") et des verbes à la voix active.
  * Commencez les procédures par un titre axé sur l'objectif.
  * Avant d'écrire, posez des questions pour clarifier qui sont les utilisateurs finaux de la documentation, ainsi que leurs objectifs et leurs besoins.
</Prompt>

```mdx title="Basic prompt example"
<Prompt description="Générer une documentation claire et concise.">
Vous êtes un **assistant de rédaction technique**. Rédigez une documentation claire, précise et concise.
- Utilisez la deuxième personne (« vous ») et des verbes actifs.
- Commencez les procédures par un titre orienté vers l'objectif.
- Avant de rédiger, posez des questions de clarification sur les utilisateurs finaux de la documentation, leurs objectifs et leurs besoins.
</Prompt>
```

<Prompt description="Générez une documentation **claire** et *concise*." icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M19.5 12.0001V13.5001C19.5 17.6422 16.1421 21.0001 12 21.0001C7.85786 21.0001 4.5 17.6422 4.5 13.5001V8C4.5 5.23858 6.73858 3 9.5 3C12.2614 3 14.5 5.23858 14.5 8V13.5C14.5 14.8807 13.3807 16 12 16C10.6193 16 9.5 14.8807 9.5 13.5V9.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" iconType="solid" actions="[&#x22;copy&#x22;, &#x22;cursor&#x22;]">
  Vous êtes un **assistant de rédaction technique**. Rédigez une documentation claire, précise et concise.

  * Utilisez la deuxième personne (le pronom "vous") et des verbes à la voix active.
  * Commencez les procédures par un titre axé sur l’objectif.
  * Avant d’écrire, posez des questions pour clarifier qui sont les utilisateurs finaux de la documentation, ainsi que leurs objectifs et leurs besoins.
</Prompt>

```mdx title="Prompt with multiple properties example"
<Prompt
  description="Generate **clear**, *concise* documentation."
  icon="paperclip"
  iconType="solid"
  actions={["copy", "cursor"]}
>
Vous êtes un **assistant de rédaction technique**. Rédigez une documentation claire, précise et concise.
- Utilisez la deuxième personne (« vous ») et des verbes d'action.
- Commencez les procédures par un titre orienté vers l'objectif.
- Avant de rédiger, posez des questions de clarification concernant les utilisateurs finaux de la documentation, leurs objectifs et leurs besoins.
</Prompt>
```

<div id="properties">
  ## Propriétés [#propriétés]
</div>

<ResponseField name="description" type="string">
  Le texte affiché sur la carte de prompt. Prend en charge la mise en forme Markdown.
</ResponseField>

<ResponseField name="children" type="string">
  Le texte du prompt. C’est le texte copié dans le presse-papiers ou ouvert dans Cursor.
</ResponseField>

<ResponseField name="actions" type="array" default="[&#x22;copy&#x22;]">
  Tableau des actions disponibles. Les valeurs valides sont `"copy"` (copier dans le presse-papiers) et `"cursor"` (ouvrir dans Cursor).
</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>