# 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://1311393678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1TzyfmEGO2Zgu1zgERP%2Fuploads%2FSd8A2secu0w0bv2IoJwS%2FDot.JPG?alt=media&#x26;token=e8cd0053-6371-43a9-8d8e-1b0b4ebd292b" alt=""><figcaption></figcaption></figure>