Félix Malfait
5d438bb70c
## Summary - **New Getting Started section** with quickstart guide and restructured navigation - **Halftone-style illustrations** for User Guide and Developer introduction cards using a Canvas 2D filter script - **Removed hero images** (`image:` frontmatter + `<Frame><img>` blocks) from all user-guide article pages - **Cleaned up translations** (13 languages): removed hero images and updated introduction cards to use halftone style - **Cleaned up twenty-ui pages**: removed outdated hero images from component docs - **Deleted orphaned images**: `table.png`, `kanban.png` - **Developer page**: fixed duplicate icon, switched to 3-column layout ## Test plan - [ ] Verify docs site builds without errors - [ ] Check User Guide introduction page renders halftone card images in both light and dark mode - [ ] Check Developer introduction page renders 3-column layout with distinct icons - [ ] Confirm article pages no longer show hero images at the top - [ ] Spot-check a few translated pages to ensure hero images are removed 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@twenty.com>
439 lines
21 KiB
Plaintext
439 lines
21 KiB
Plaintext
---
|
|
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>
|