# 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="https://content.gitbook.com/content/vmuA4PHr0UGwcIHFy0W6/blobs/sdXwehRVgFyWBTBP37BO/Dot.JPG" alt=""><figcaption></figcaption></figure>