github-actions[bot]
2353bc62cc
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
440 lines
21 KiB
Plaintext
440 lines
21 KiB
Plaintext
---
|
|
title: Boutons
|
|
image: /images/user-guide/views/filter.png
|
|
---
|
|
|
|
<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>
|