---
description: This represents Dot Icon
---

# 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](https://mantisdashboard.com/dashboard/analytics))

<figure><img src="https://content.gitbook.com/content/3ymrW0ro7Bk4bocF9o5I/blobs/qpo3D0zMnyP64oXBRnze/Dot.JPG" alt=""><figcaption></figcaption></figure>
