> ## 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.

# 체크마크

<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="헤더" width="1440" height="680" data-path="images/user-guide/tasks/tasks_header.png" />
</Frame>

성공하거나 완료된 작업을 나타냅니다.

<Tabs>
  <Tab title="사용법">
    ```jsx theme={null}
    import { Checkmark } from 'twenty-ui/display';

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

  <Tab title="프로퍼티">
    `React.ComponentPropsWithoutRef<'div'>` 를 확장하며 일반 `div` 요소의 모든 속성을 수용합니다.
  </Tab>
</Tabs>

## 애니메이션 체크마크

애니메이션 기능이 추가된 체크마크 아이콘을 나타냅니다.

<Tabs>
  <Tab title="사용법">
    ```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="프로퍼티">
    | 프로퍼티        | 유형  | 설명                         | 기본값   |
    | ----------- | --- | -------------------------- | ----- |
    | isAnimating | 부울  | 체크마크가 애니메이션 중인지 여부를 제어합니다. | 거짓    |
    | 색상          | 문자열 | 체크마크의 색상                   |       |
    | 지속 시간       | 숫자  | 애니메이션의 지속 시간(초)            | 0.5초  |
    | 크기          | 숫자  | 체크마크의 크기                   | 28 픽셀 |
  </Tab>
</Tabs>