---
title: 체크마크
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="헤더" />
</Frame>

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

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

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

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

## 애니메이션 체크마크

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

<Tabs>
  <Tab title="사용법">
    ```jsx
    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>