---
title: Coche
---

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

Représente une action réussie ou complétée.

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { Checkmark } from 'twenty-ui/display';

    export const MyComponent = () => {
      return <Checkmark />;
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    Étend `React.ComponentPropsWithoutRef<'div'>` et accepte tous les props d'un élément `div` normal.
  </Tab>
</Tabs>

## Coche animée

Représente une icône de coche avec la fonctionnalité d'animation ajoutée.

<Tabs>
  <Tab title="Utilisation">
    ```jsx
    import { AnimatedCheckmark } from 'twenty-ui/display';

    export const MyComponent = () => {
      return (
        <AnimatedCheckmark
          isAnimating={true}
          color="green"
          duration={0.5}
          size={30}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Propriétés">
    | Propriétés           | Type    | Description                         | Par défaut   |
    | -------------------- | ------- | ----------------------------------- | ------------ |
    | En cours d'animation | booléen | Contrôle si la coche est animée     | faux         |
    | couleur              | chaîne  | Couleur de la coche                 |              |
    | durée                | nombre  | La durée de l'animation en secondes | 0,5 secondes |
    | taille               | nombre  | La taille de la coche               | 28 pixels    |
  </Tab>
</Tabs>