Dots

Ripple UI comes with dots component allow to show a status of a process.

Default

Simple example of a dots.

HTML
JSX
<span class="dot"></span>

Colors

You can change the color of the dots.

HTML
JSX
<span class="dot"></span>
<span class="dot dot-primary"></span>
<span class="dot dot-secondary"></span>
<span class="dot dot-success"></span>
<span class="dot dot-warning"></span>
<span class="dot dot-error"></span>

With text

You can add text to the dots.

Cancelled Ready Cancelled Waiting Success Warning
HTML
JSX
<span class="flex items-center gap-2">
<span class="dot"></span>
<span>Cancelled</span>
</span>
<span class="flex items-center gap-2">
<span class="dot dot-primary"></span>
<span>Ready</span>
</span>
<span class="flex items-center gap-2">
<span class="dot dot-error"></span>
<span>Cancelled</span>
</span>
<span class="flex items-center gap-2">
<span class="dot dot-secondary"></span>
<span>Waiting</span>
</span>
<span class="flex items-center gap-2">
<span class="dot dot-success"></span>
<span>Success</span>
</span>
<span class="flex items-center gap-2">
<span class="dot dot-warning"></span>
<span>Warning</span>
</span>

API

classDescription
dotDefault dot clase base
dot-primaryPrimary dot color
dot-secondarySecondary dot color
dot-successSuccess dot color
dot-warningWarning dot color
dot-errorError dot color