Dot Default Style
<span class="dot"></span>Dots Color
<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-info"></span>
<span class="dot dot-warning"></span>
<span class="dot dot-danger"></span>Dots With Text
Cancelled Primary Secondary Success Info Warning Danger
<span class="flex align-items-center gap-5">
<span class="dot"></span>
<span class="dot-title">Cancelled</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-primary"></span>
<span class="dot-title">Primary</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-secondary"></span>
<span class="dot-title">Secondary</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-success"></span>
<span class="dot-title">Success</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-info"></span>
<span class="dot-title">Info</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-warning"></span>
<span class="dot-title">Warning</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-danger"></span>
<span class="dot-title">Danger</span>
</span>Dots With Color Text
Cancelled Primary Secondary Success Info Warning Danger
<span class="flex align-items-center gap-5">
<span class="dot"></span>
<span class="dot-title text-dot">Cancelled</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-primary"></span>
<span class="dot-title text-primary">Primary</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-secondary"></span>
<span class="dot-title text-secondary">Secondary</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-success"></span>
<span class="dot-title text-success">Success</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-info"></span>
<span class="dot-title text-info">Info</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-warning"></span>
<span class="dot-title text-warning">Warning</span>
</span>
<span class="flex align-items-center gap-5">
<span class="dot dot-danger"></span>
<span class="dot-title text-danger">Danger</span>
</span>