Boutons

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

Bouton

Utilisation
Propriétés

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")}
    />
  );
};

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. Les options incluent : `default`, `blue`, et `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

Groupe de Boutons

Utilisation
Propriétés

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>
  );
};

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. A deux options : `medium` et `small`
accent	chaîne	La couleur d’accentuation des boutons dans le groupe. Les options incluent `default`, `blue` et `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

Bouton Flottant

Utilisation
Propriétés

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}
    />
  );
};

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

Groupe de Boutons Flottants

Utilisation
Propriétés

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>
  );
};

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

Bouton Icône Flottant

Utilisation
Propriétés

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}
    />
  );
};

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

Groupe de Boutons Icône Flottants

Utilisation
Propriétés

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} />
  );
};

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.

Bouton Clair

Utilisation
Propriétés

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')}
  />;
};

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

Bouton Icône Clair

Utilisation
Propriétés

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")}
    />
  );
};

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

Bouton Principal

Utilisation
Propriétés

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}
    />
  );
};

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

Bouton Icône Arrondie

Utilisation
Propriétés

import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

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

Propriétés	Type	Description
Icône	`React.ComponentType`
Propriétés React `button`	`React.ButtonHTMLAttributes<HTMLButtonElement>`

Welcome

Core Concepts

Bouton

Groupe de Boutons

Bouton Flottant

Groupe de Boutons Flottants

Bouton Icône Flottant

Groupe de Boutons Icône Flottants

Bouton Clair

Bouton Icône Clair

Bouton Principal

Bouton Icône Arrondie

​Bouton

​Groupe de Boutons

​Bouton Flottant

​Groupe de Boutons Flottants

​Bouton Icône Flottant

​Groupe de Boutons Icône Flottants

​Bouton Clair

​Bouton Icône Clair

​Bouton Principal

​Bouton Icône Arrondie

Bouton

Groupe de Boutons

Bouton Flottant

Groupe de Boutons Flottants

Bouton Icône Flottant

Groupe de Boutons Icône Flottants

Bouton Clair

Bouton Icône Clair

Bouton Principal

Bouton Icône Arrondie