> ## 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="属性">
    | 属性   | 类型  | 描述             | 默认    |
    | ---- | --- | -------------- | ----- |
    | 正在动画 | 布尔值 | 控制对勾标记是否在动画中   | 假     |
    | 颜色   | 字符串 | 对勾标记的颜色        |       |
    | 持续时间 | 数字  | 动画的持续时间（以秒为单位） | 0.5 秒 |
    | 大小   | 数字  | 对勾标记的大小        | 28 像素 |
  </Tab>
</Tabs>