> ## 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://mintlify.s3.us-west-1.amazonaws.com/twenty/l/ja/twenty-ui/display/%22%22" alt="ヘッダー" />
</Frame>

成功したまたは完了したアクションを示します。

<Tabs>
  <Tab title="使用方法">
    ```jsx theme={null}
    import { Checkmark } from 'twenty-ui/display';

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

  <Tab title="プロパティ">
    `div` 要素の全てのプロパティを受け取る他、`React.ComponentPropsWithoutRef<'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="プロパティ">
    | プロパティ      | タイプ    | 説明                    | デフォルト  |
    | ---------- | ------ | --------------------- | ------ |
    | アニメーションの有無 | ブール型   | チェックマークのアニメーションを制御します | 偽      |
    | カラー        | string | チェックマークの色             |        |
    | 継続時間       | 数      | アニメーションの持続時間（秒）       | 0.5秒   |
    | サイズ        | 数      | チェックマークのサイズ           | 28ピクセル |
  </Tab>
</Tabs>