> ## Documentation Index
> Fetch the complete documentation index at: https://www.chapterjs.org/llms.txt
> Use this file to discover all available pages before exploring further.

# button()

> Tout ce que déclare un fichier de bouton, ce que reçoit sa fonction run, et les types partagés par chaque composant interactif

`button()` déclare un bouton, depuis n’importe quel fichier de `src/` ; le nom de son export est son identifiant. Elle prend un objet, `ButtonConfig`, et type `run` d’après lui.

```ts src/components/confirm.ts theme={"theme":{"light":"github-light","dark":"vesper"}}
import { button } from 'chapterjs';

export default button({
  label: 'Confirmer',
  style: 'success',
  async run({ interaction }) {
    await interaction.update({ content: 'Confirmé !', components: [] });
  },
});
```

> [!NOTE]
>
> Comment écrire un bouton, y transporter des données et répondre à un clic est dans le [guide](https://www.chapterjs.org/fr/components.md). Cette page liste ce qui existe.

## button()

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
button<Data extends DataShape = {}, Where extends ComponentWhere = 'guild'>(config: ButtonConfig<Data, Where>): ButtonDeclaration<Data>
```

Déclare un bouton. Exportez le résultat depuis n’importe quel fichier de `src/` : le nom de l’export est ce qui distingue le bouton, donc vous n’écrivez jamais d’identifiant.

`Data` et `Where` sont déduits de ce que vous passez : vous ne les écrivez jamais.

### ButtonDeclaration

Ce que renvoie `button()` : une déclaration que le framework trouve dans les exports d’un fichier. Importez-le là où vous envoyez un message, et appelez-le avec les données que transporte le bouton (`ban({ userId })`) ; un bouton sans données s’utilise tel quel (`confirm`), ou s’appelle avec une apparence (`confirm({ disabled: true })`).

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type ButtonDeclaration<Data extends DataShape = {}> = { readonly config: unknown } &
  ({} extends Data
    ? ((look?: ButtonLook) => ButtonComponent) & ButtonComponent
    : {} extends DataInputOf<Data>
      ? ((data?: DataInputOf<Data>, look?: ButtonLook) => ButtonComponent) & ButtonComponent
      : (data: DataInputOf<Data>, look?: ButtonLook) => ButtonComponent)
```

**config** `unknown`

Ce que le fichier a donné à `button()`, pas encore vérifié.

## ButtonConfig

Ce qu’un fichier de bouton donne à `button()`. Il a chaque champ de [`ButtonLook`](#buttonlook) et d’[`InteractiveConfig`](#interactiveconfig), plus :

**run** `(context: ButtonContext\<Data, Where\>) =\> unknown`

Ce qu’il faut faire quand quelqu’un clique sur le bouton. Omis pour un bouton qui n’est qu’attendu (`message.waitForClick()`) : quand plus rien ne l’attend, un clic répond qu’il n’est plus disponible. Voir [Attendre une réponse](https://www.chapterjs.org/fr/waiting.md#un-clic).

Un bouton a besoin d’un `label` ou d’un `emoji`.

### ButtonLook

L’apparence d’un bouton. Tout est facultatif quand il est mis dans un message : ce que dit le fichier est la valeur par défaut.

**label** `DynamicText\<Data\>`

Le texte sur le bouton (80 caractères au plus) : écrit tel quel, ou une fonction de `t` et des données, lancée au moment de l’envoi du message. Voir [DynamicText](https://www.chapterjs.org/fr/reference/messages.md#dynamictext).

**emoji** `EmojiInput`

Un emoji sur le bouton, avant l’étiquette.

**style** `ButtonStyleName`

La couleur du bouton. `'primary'` par défaut.

**disabled** `boolean`

Affiche le bouton grisé, impossible à cliquer.

### ButtonStyleName

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type ButtonStyleName = 'primary' | 'secondary' | 'success' | 'danger'
```

La couleur d’un bouton : `'primary'` (blurple), `'secondary'` (gris), `'success'` (vert) ou `'danger'` (rouge). Les boutons de lien et premium se fabriquent avec [`linkButton()`](https://www.chapterjs.org/fr/reference/layout#linkbutton) et [`premiumButton()`](https://www.chapterjs.org/fr/reference/layout#premiumbutton).

[Documentation de Discord](https://docs.discord.com/developers/components/reference#button-button-styles)

## ButtonContext

Ce que reçoit `run` quand on clique sur le bouton : tout ce qu’a [InteractiveContext](#interactivecontext), et l’endroit tel que le donne [PlaceOf](#placeof) pour `Where`, avec une [ComponentInteraction](https://www.chapterjs.org/fr/reference/interaction.md#componentinteraction).

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type ButtonContext<Data extends DataShape = {}, Where extends ComponentWhere = 'guild'> =
  InteractiveContext<Data> & PlaceOf<Where, ComponentInteraction>
```

## Partagé par les boutons et les menus déroulants

### InteractiveConfig

Ce que déclare chaque composant interactif, en plus de son apparence.

**data** `DataShape`

Ce que le composant transporte depuis le message qui l’affiche jusqu’au code qui tourne quand on l’utilise : un nom et une sorte pour chaque valeur (`{ userId: 'string', page: 'number' }`). Donné quand le composant est mis dans un message, reçu typé dans `run`. Discord le garde dans le composant lui-même, donc il survit aux redémarrages.

**where** `ComponentWhere`

Où le composant peut être utilisé : `'guild'` (sur les serveurs, par défaut), `'dm'` (en messages privés avec le bot) ou `'both'`. Ce que reçoit `run` suit.

**who** `ComponentWho`

Qui peut l’utiliser : `'everyone'` (par défaut) ou seulement l’auteur (`'author'`) de la commande à laquelle le message répond.

**ephemeral** `boolean`

Rendre les réponses du composant visibles seulement par qui l’a utilisé. Sur un message que seule la personne voit (une réponse éphémère), elles le sont déjà.

### InteractiveContext

Ce que chaque composant interactif donne à son `run`, en plus de l’endroit.

**user** `User`

Qui l’a utilisé.

**message** `Message`

Le message sur lequel est le composant.

Chaque composant reçoit aussi `t` quand le projet a une langue : voir [`TranslationContext`](https://www.chapterjs.org/fr/reference/messages#translationcontext).

**data** `DataValuesOf\<Data\>`

Ce que transporte le composant, tel que déclaré dans `data`.

### ComponentWhere

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type ComponentWhere = 'guild' | 'dm' | 'both'
```

Où un composant peut être utilisé : dans les messages des serveurs (`'guild'`), en messages privés avec le bot (`'dm'`), ou les deux. Un composant est là où est le message qui le contient : ceci dit où votre code s’y attend.

### ComponentWho

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type ComponentWho = 'everyone' | 'author'
```

Qui peut utiliser un composant : tous ceux qui voient le message (`'everyone'`, par défaut), ou seulement l’auteur (`'author'`), la personne qui a utilisé la commande à laquelle le message répond. Toute autre personne reçoit un refus privé.

## Les données

### DataKind

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type DataKind = 'string' | 'number' | 'boolean'
```

Les sortes de valeurs qu’un composant peut transporter dans ses `data`.

### DataField

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type DataField = DataKind | { type: 'string'; default?: string } | { type: 'number'; default?: number } | { type: 'boolean'; default?: boolean }
```

Une valeur que transporte un composant : sa sorte, ou sa sorte avec une valeur par défaut, ce qui la rend facultative là où le composant est mis dans un message.

### DataShape

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type DataShape = Readonly<Record<string, DataField>>
```

Ce que transporte un composant : un nom pour chaque valeur, et sa sorte.

### DataValuesOf

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type DataValuesOf<Shape extends DataShape> = { [Name in keyof Shape]: string | number | boolean }
```

Les valeurs d’une déclaration `data`, typées d’après elle : ce que reçoivent `run` et les textes du composant. Une valeur avec une valeur par défaut est toujours là.

### DataInputOf

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type DataInputOf<Shape extends DataShape> = { [Name in keyof Shape]: string | number | boolean }
```

Ce qu’un message donne à un composant : les valeurs de ses `data`, celles qui ont une valeur par défaut étant facultatives.

## L’endroit

Ce que reçoit `run` à propos de l’endroit où le composant a été utilisé suit `where`, comme pour une [commande](https://www.chapterjs.org/fr/reference/command.md#commandcontext). Les mêmes types servent aux formulaires, avec une `ModalInteraction`.

### PlaceOf

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type PlaceOf<Where extends ComponentWhere, I extends Interaction> =
  Where extends 'guild' ? PlaceInGuild<I>
  : Where extends 'dm' ? PlaceInDm<I>
  : PlaceInGuild<I> | PlaceInPrivate<I>
```

Ce que reçoit `run` à propos de l’endroit où il a été utilisé, selon `where`.

### PlaceInGuild

Ce que reçoit `run` à propos de l’endroit, sur un serveur.

**interaction** `InGuild\<I\>` *required*

L’interaction, avec son serveur, son membre et son salon jamais `null`.

**guild** `Guild` *required*

Le serveur où il a été utilisé.

**member** `GuildMember` *required*

Qui l’a utilisé, en tant que membre du serveur.

**channel** `GuildTextBasedChannel` *required*

Le salon où il a été utilisé.

### PlaceInPrivate

Ce que reçoit `run` à propos de l’endroit, dans un message privé, quand il fonctionne aussi sur les serveurs (`where: 'both'`).

**interaction** `InPrivate\<I\>` *required*

L’interaction, avec `guildId`, `guild` et `member` à `null`.

**guild** `null` *required*

Pas de serveur : il a été utilisé dans un message privé.

**member** `null` *required*

Pas de membre : la personne est `user`.

**channel** `DMChannel` *required*

La conversation privée où il a été utilisé.

### PlaceInDm

Ce que reçoit `run` à propos de l’endroit, quand il ne fonctionne qu’en messages privés (`where: 'dm'`).

**interaction** `InDm\<I\>` *required*

L’interaction, sur laquelle rien qui concerne un serveur n’existe.

**channel** `DMChannel` *required*

La conversation privée où il a été utilisé.

### InGuild, InPrivate, InDm

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type InGuild<I extends Interaction> = I & { guildId: string; guild: Guild; member: GuildMember; channel: GuildTextBasedChannel }
type InPrivate<I extends Interaction> = I & { guildId: null; guild: null; member: null; channel: DMChannel }
type InDm<I extends Interaction> = Omit<I, 'guildId' | 'guild' | 'member' | 'channel'> & { channel: DMChannel }
```

Une interaction vue depuis un serveur, depuis un message privé pour quelque chose qui fonctionne aussi sur les serveurs, et depuis un message privé pour quelque chose qui ne fonctionne que là.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.