Dots

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

​

Default

Simple example of a dots.

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

​

Colors

You can change the color of the dots.

<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

<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