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

<figure><img src="https://content.gitbook.com/content/syph5GxVmA2dgTLCxowV/blobs/8vIoJzg996UO7KwDgqbL/Dot.JPG" alt=""><figcaption></figcaption></figure>