---
title: Onay işareti
icon: circle-check
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Başlık" />
</Frame>

Başarılı veya tamamlanmış bir işlemi temsil eder.

<Tabs>
<Tab title="Kullanım">

```jsx
import { Checkmark } from 'twenty-ui/display';

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


</Tab>

<Tab title="Özellikler">

`React.ComponentPropsWithoutRef<'div'>` öğesini genişletir ve normal bir `div` elemanının tüm özelliklerini kabul eder.

</Tab>

</Tabs>

## Animasyonlu Onay İşareti

Animasyon özelliği eklenmiş bir onay işareti simgesini temsil eder.

<Tabs>

<Tab title="Kullanım">

```jsx
import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};
```

</Tab>

<Tab title="Özellikler">


| Özellikler  | Tür     | Açıklama                                                 | Varsayılan |
| ----------- | ------- | -------------------------------------------------------- | ---------- |
| isAnimating | boolean | Onay işaretinin animasyonlu olup olmadığını kontrol eder | yanlış     |
| renk        | dize    | Onay işaretinin rengi                                    |            |
| süre        | sayı    | Animasyonun süresi, saniye cinsinden                     | 0.5 saniye |
| boyut       | sayı    | Onay işaretinin boyutu                                   | 28 piksel  |



</Tab>

</Tabs>