---
title: علامة صحيح
icon: circle-check
---

<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 | قيمة منطقية | يتحكم فيما إذا كانت علامة صحيح متحركة | خاطئ              |
| اللون       | string      | لون علامة الاختيار                    |                   |
| المدة       | رقم         | مدة الحركة بالثواني                   | 0.5 ثانية         |
| الحجم       | رقم         | حجم علامة الاختيار                    | 28 بكسل           |



</Tab>

</Tabs>