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 flex"></span>

Colors 

You can change the color of the dots.

HTML
JSX
<span class="dot flex"></span>
<span class="dot dot-primary flex"></span>
<span class="dot dot-secondary flex"></span>
<span class="dot dot-success flex"></span>
<span class="dot dot-warning flex"></span>
<span class="dot dot-error flex"></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
DrawerDivider
Edit this page on GitHub