> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/mantis/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/mantis/v3.0.0/components/dot.md).

# Dot

| Property | Type       | Props Value                                                 |
| -------- | ---------- | ----------------------------------------------------------- |
| color    | ColorProps | primary (default), secondary, info, success, warning, error |
| size     | number     | default - 8px                                               |
| variant  | string     | filled (default), outline                                   |
| sx       | CSSObject  |                                                             |

{% hint style="info" %}
Asterisk (<mark style="color:red;">\*</mark>) indicates required props.
{% endhint %}

Example:

{% code title="@extended/Dot.tsx" %}

```javascript
<Dot />
<Dot color="success" />
```

{% endcode %}

Preview: Dot used for product status (<https://mantisdashboard.com/dashboard/analytics>)

<figure><img src="/files/ZfQR2m4T8qTir8toSQPZ" alt=""><figcaption></figcaption></figure>