---
title: Boutons
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="En-tête" />
</Frame>

Une liste de boutons et de groupes de boutons utilisés dans toute l'application.

## Bouton

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { Button } from "@/ui/input/button/components/Button";

    export const MyComponent = () => {
      return (
        <Button
          className
          Icon={null}
          title="Title"
          fullWidth={false}
          variant="primary"
          size="medium"
          position="standalone"
          accent="default"
          soon={false}
          disabled={false}
          focus={true}
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés    | Type                  | Description                                                                                                           |
    | ------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------- |
    | nomDeClasse   | chaîne                | Nom de classe facultatif pour le style supplémentaire                                                                 |
    | Icône         | `React.ComponentType` | Un composant d'icône facultatif qui est affiché dans le bouton                                                        |
    | titre         | chaîne                | Le contenu texte du bouton                                                                                            |
    | largeurTotale | booléen               | Définit si le bouton doit occuper toute la largeur de son conteneur                                                   |
    | variante      | chaîne                | La variante de style visuel du bouton. Les options incluent `primaire`, `secondaire` et `tertiaire`                   |
    | taille        | chaîne                | La taille du bouton. A deux options : `small` et `medium`                                                             |
    | position      | chaîne                | La position du bouton par rapport à ses voisins. Les options incluent : `indépendant`, `gauche`, `droite` et `milieu` |
    | accent        | chaîne                | La couleur d'accentuation du bouton. Options include: `default`, `blue`, and `danger`                                 |
    | Bient\u00f4t  | booléen               | Indique si le bouton est marqué comme "bientôt" (comme pour les futures fonctionnalités)                              |
    | désactivé     | booléen               | Spécifie si le bouton est désactivé ou non                                                                            |
    | focus         | booléen               | Détermine si le bouton a le focus                                                                                     |
    | onClick       | fonction              | Une fonction de rappel qui se déclenche lorsque l'utilisateur clique sur le bouton                                    |
  </Tab>
</Tabs>

## Groupe de Boutons

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { Button } from "@/ui/input/button/components/Button";
    import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

    export const MyComponent = () => {
      return (
        <ButtonGroup variant="primary" size="large" accent="blue" className>
          <Button
            className
            Icon={null}
            title="Button 1"
            fullWidth={false}
            variant="primary"
            size="medium"
            position="standalone"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
          <Button
            className
            Icon={null}
            title="Button 2"
            fullWidth={false}
            variant="secondary"
            size="medium"
            position="left"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
          <Button
            className
            Icon={null}
            title="Button 3"
            fullWidth={false}
            variant="tertiary"
            size="medium"
            position="right"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
        </ButtonGroup>
      );
    };

    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés  | Type      | Description                                                                                                          |
    | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------- |
    | variante    | chaîne    | La variante de style visuel des boutons dans le groupe. Les options incluent `primaire`, `secondaire` et `tertiaire` |
    | taille      | chaîne    | La taille des boutons dans le groupe. Has two options: `medium` and `small`                                          |
    | accent      | chaîne    | La couleur d'accentuation des boutons dans le groupe. Options include `default`, `blue` and `danger`                 |
    | nomDeClasse | chaîne    | Nom de classe facultatif pour le style supplémentaire                                                                |
    | enfants     | ReactNode | Un tableau d'éléments React représentant les boutons individuels dans le groupe                                      |
  </Tab>
</Tabs>

## Bouton Flottant

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButton
          className
          Icon={IconSearch}
          title="Title"
          size="medium"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés     | Type                  | Description                                                                                                         |
    | -------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- |
    | nomDeClasse    | chaîne                | Nom facultatif pour un style supplémentaire                                                                         |
    | Icône          | `React.ComponentType` | Un composant d'icône facultatif qui est affiché dans le bouton                                                      |
    | titre          | chaîne                | Le contenu texte du bouton                                                                                          |
    | taille         | chaîne                | La taille du bouton. A deux options : `small` et `medium`                                                           |
    | position       | chaîne                | La position du bouton par rapport à ses voisins. Les options incluent : `indépendant`, `gauche`, `milieu`, `droite` |
    | appliquerOmbre | booléen               | Détermine s'il faut appliquer une ombre à un bouton                                                                 |
    | appliquerFlou  | booléen               | Détermine s'il faut appliquer un effet flou au bouton                                                               |
    | désactivé      | booléen               | Détermine si le bouton est désactivé                                                                                |
    | focus          | booléen               | Indique si le bouton a le focus                                                                                     |
  </Tab>
</Tabs>

## Groupe de Boutons Flottants

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButtonGroup size="small">
          <FloatingButton
            className
            Icon={IconClipboardText}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
            focus={true}
          />
          <FloatingButton
            className
            Icon={IconCheckbox}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
          />
        </FloatingButtonGroup>
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés | Type      | Description                                                                     | Par défaut |
    | ---------- | --------- | ------------------------------------------------------------------------------- | ---------- |
    | taille     | chaîne    | La taille du bouton. A deux options : `small` et `medium`                       | petit      |
    | enfants    | ReactNode | Un tableau d'éléments React représentant les boutons individuels dans le groupe |            |
  </Tab>
</Tabs>

## Bouton Icône Flottant

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingIconButton
          className
          Icon={IconSearch}
          size="small"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={false}
          onClick={() => console.log("click")}
          isActive={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés     | Type                  | Description                                                                                                           |
    | -------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------- |
    | nomDeClasse    | chaîne                | Nom facultatif pour un style supplémentaire                                                                           |
    | Icône          | `React.ComponentType` | Un composant d'icône facultatif qui est affiché dans le bouton                                                        |
    | taille         | chaîne                | La taille du bouton. A deux options : `small` et `medium`                                                             |
    | position       | chaîne                | La position du bouton par rapport à ses voisins. Les options incluent : `indépendant`, `gauche`, `droite` et `milieu` |
    | appliquerOmbre | booléen               | Détermine s'il faut appliquer une ombre à un bouton                                                                   |
    | appliquerFlou  | booléen               | Détermine s'il faut appliquer un effet flou au bouton                                                                 |
    | désactivé      | booléen               | Détermine si le bouton est désactivé                                                                                  |
    | focus          | booléen               | Indique si le bouton a le focus                                                                                       |
    | onClick        | fonction              | Une fonction de rappel qui se déclenche lorsque l'utilisateur clique sur le bouton                                    |
    | estActif       | booléen               | Détermine si le bouton est dans un état actif                                                                         |
  </Tab>
</Tabs>

## Groupe de Boutons Icône Flottants

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      const iconButtons = [
        {
          Icon: IconClipboardText,
          onClick: () => console.log("Button 1 clicked"),
          isActive: true,
        },
        {
          Icon: IconCheckbox,
          onClick: () => console.log("Button 2 clicked"),
          isActive: true,
        },
      ];

      return (
        <FloatingIconButtonGroup
        className
        size="small"
        iconButtons={iconButtons} />
      );
    };

    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés   | Type    | Description                                                                                                                                                                                                                                                                                    |
    | ------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | nomDeClasse  | chaîne  | Nom facultatif pour un style supplémentaire                                                                                                                                                                                                                                                    |
    | taille       | chaîne  | La taille du bouton. A deux options : `small` et `medium`                                                                                                                                                                                                                                      |
    | boutonsIcône | tableau | Un tableau d'objets, chacun représentant un bouton icône dans le groupe. Chaque objet doit inclure le composant d'icône que vous souhaitez afficher dans le bouton, la fonction que vous souhaitez appeler lorsqu'un utilisateur clique sur le bouton, et si le bouton doit être actif ou non. |
  </Tab>
</Tabs>

## Bouton Clair

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { LightButton } from "@/ui/input/button/components/LightButton";

    export const MyComponent = () => {
      return <LightButton
      className
      icon={null}
      title="Title"
      accent="secondary"
      active={false}
      disabled={false}
      focus={true}
      onClick={()=>console.log('click')}
      />;
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés  | Type              | Description                                                                             |
    | ----------- | ----------------- | --------------------------------------------------------------------------------------- |
    | nomDeClasse | chaîne            | Nom facultatif pour un style supplémentaire                                             |
    | icône       | `React.ReactNode` | L'icône que vous voulez afficher dans le bouton                                         |
    | titre       | chaîne            | Le contenu texte du bouton                                                              |
    | accent      | chaîne            | La couleur d'accentuation du bouton. Les options incluent : `secondaire` et `tertiaire` |
    | actif       | booléen           | Détermine si le bouton est dans un état actif                                           |
    | désactivé   | booléen           | Détermine si le bouton est désactivé                                                    |
    | focus       | booléen           | Indique si le bouton a le focus                                                         |
    | onClick     | fonction          | Une fonction de rappel qui se déclenche lorsque l'utilisateur clique sur le bouton      |
  </Tab>
</Tabs>

## Bouton Icône Clair

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <LightIconButton
          className
          testId="test1"
          Icon={IconSearch}
          title="Title"
          size="small"
          accent="secondary"
          active={true}
          disabled={false}
          focus={true}
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés  | Type                  | Description                                                                             |
    | ----------- | --------------------- | --------------------------------------------------------------------------------------- |
    | nomDeClasse | chaîne                | Nom facultatif pour un style supplémentaire                                             |
    | testId      | chaîne                | Identifiant de test pour le bouton                                                      |
    | Icône       | `React.ComponentType` | Un composant d'icône facultatif qui est affiché dans le bouton                          |
    | titre       | chaîne                | Le contenu texte du bouton                                                              |
    | taille      | chaîne                | La taille du bouton. A deux options : `petit` et `moyen`                                |
    | accent      | chaîne                | La couleur d'accentuation du bouton. Les options incluent : `secondaire` et `tertiaire` |
    | actif       | booléen               | Détermine si le bouton est dans un état actif                                           |
    | désactivé   | booléen               | Détermine si le bouton est désactivé                                                    |
    | focus       | booléen               | Indique si le bouton a le focus                                                         |
    | onClick     | fonction              | Une fonction de rappel qui se déclenche lorsque l'utilisateur clique sur le bouton      |
  </Tab>
</Tabs>

## Bouton Principal

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { MainButton } from "@/ui/input/button/components/MainButton";
    import { IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <MainButton
          title="Checkbox"
          fullWidth={false}
          variant="primary"
          soon={false}
          Icon={IconCheckbox}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés                | Type                             | Description                                                                              |
    | ------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------- |
    | titre                     | chaîne                           | Le contenu texte du bouton                                                               |
    | largeurTotale             | booléen                          | Définit si le bouton doit occuper toute la largeur de son conteneur                      |
    | variante                  | chaîne                           | La variante de style visuel du bouton. Les options incluent `primaire` et `secondaire`   |
    | Bient\u00f4t              | booléen                          | Indique si le bouton est marqué comme "bientôt" (comme pour les futures fonctionnalités) |
    | Icône                     | `React.ComponentType`            | Un composant d'icône facultatif qui est affiché dans le bouton                           |
    | Propriétés React `button` | `React.ComponentProps<'button'>` | Toutes les propriétés standard des boutons HTML sont prises en charge                    |
  </Tab>
</Tabs>

## Bouton Icône Arrondie

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <RoundedIconButton
          Icon={IconSearch}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés                | Type                                            | Description |
    | ------------------------- | ----------------------------------------------- | ----------- |
    | Icône                     | `React.ComponentType`                           |             |
    | Propriétés React `button` | `React.ButtonHTMLAttributes<HTMLButtonElement>` |             |
  </Tab>
</Tabs>