> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Häkchen

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/tasks/tasks_header.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=4c4e26ebbb9b40e541a945a9cda7c28a" alt="Kopfzeile" width="1440" height="680" data-path="images/user-guide/tasks/tasks_header.png" />
</Frame>

Stellt eine erfolgreiche oder abgeschlossene Aktion dar.

<Tabs>
  <Tab title="&#x22;Verwendung&#x22;">
    ```jsx theme={null}
    import { Checkmark } from 'twenty-ui/display';

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

  <Tab title="&#x22;Eigenschaften&#x22;">
    Erweitert `React.ComponentPropsWithoutRef<'div'>` und akzeptiert alle Eigenschaften eines regulären `div`-Elements.
  </Tab>
</Tabs>

## Animiertes Häkchen

Stellt ein Häkchen-Symbol mit der zusätzlichen Funktion der Animation dar.

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

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

  <Tab title="Eigenschaften">
    | Eigenschaften | Typ          | Beschreibung                          | Standard     |
    | ------------- | ------------ | ------------------------------------- | ------------ |
    | isAnimating   | boolesch     | Steuert, ob das Häkchen animiert wird | falsch       |
    | farbe         | Zeichenkette | Farbe des Häkchens                    |              |
    | Dauer         | nummer       | Die Dauer der Animation in Sekunden   | 0,5 Sekunden |
    | größe         | nummer       | Die Größe des Häkchens                | 28 Pixel     |
  </Tab>
</Tabs>