Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- Dot Alternative -->
<span class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium rounded text-heading text-xs font-medium px-1.5 py-0.5 border border-default inline-flex items-center">
  <span class="bg-heading me-1 rounded-full h-1.5 w-1.5"></span>
  Alternative
</span>
<!-- Dot Brand -->
<span class="bg-brand-softer hover:bg-brand-soft rounded text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 border border-brand-subtle inline-flex items-center">
  <span class="bg-fg-brand-strong me-1 rounded-full h-1.5 w-1.5"></span>
  Brand
</span>
<!-- Dot Danger -->
<span class="bg-danger-soft hover:bg-danger-medium rounded text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 border border-danger-subtle inline-flex items-center">
  <span class="bg-fg-danger-strong me-1 rounded-full h-1.5 w-1.5"></span>
  Danger
</span>
<!-- Dot Gray -->
<span class="bg-neutral-secondary-medium hover:bg-neutral-tertiary-medium rounded text-heading text-xs font-medium px-1.5 py-0.5 border border-default-medium inline-flex items-center">
  <span class="bg-heading me-1 rounded-full h-1.5 w-1.5"></span>
  Gray
</span>
<!-- Dot Success -->
<span class="bg-success-soft hover:bg-success-medium rounded text-fg-success-strong text-xs font-medium px-1.5 py-0.5 border border-success-subtle inline-flex items-center">
  <span class="bg-fg-success-strong me-1 rounded-full h-1.5 w-1.5"></span>
  Success
</span>
<!-- Dot Warning -->
<span class="bg-warning-soft hover:bg-warning-medium rounded text-fg-warning text-xs font-medium px-1.5 py-0.5 border border-warning-subtle inline-flex items-center">
  <span class="bg-fg-warning me-1 rounded-full h-1.5 w-1.5"></span>
  Warning
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Dot Alternative
render(Flowbite::Badge.new(bordered: true, dot: true, style: :alternative)) { "Alternative" }
# Dot Brand
render(Flowbite::Badge.new(bordered: true, dot: true, style: :brand)) { "Brand" }
# Dot Danger
render(Flowbite::Badge.new(bordered: true, dot: true, style: :danger)) { "Danger" }
# Dot Gray
render(Flowbite::Badge.new(bordered: true, dot: true, style: :gray)) { "Gray" }
# Dot Success
render(Flowbite::Badge.new(bordered: true, dot: true, style: :success)) { "Success" }
# Dot Warning
render(Flowbite::Badge.new(bordered: true, dot: true, style: :warning)) { "Warning" }

Add a colored dot indicator before the badge text.

No params configured.