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
<!-- 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">
  Alternative
</span>
<!-- 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">
  Brand
</span>
<!-- 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">
  Danger
</span>
<!-- 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">
  Gray
</span>
<!-- 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">
  Success
</span>
<!-- Warning -->
<span class="bg-warning-soft hover:bg-warning-medium rounded text-fg-warning text-xs font-medium px-1.5 py-0.5">
  Warning
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Alternative
render(Flowbite::Badge.new(style: :alternative)) { "Alternative" }
# Brand
render(Flowbite::Badge.new(style: :brand)) { "Brand" }
# Danger
render(Flowbite::Badge.new(style: :danger)) { "Danger" }
# Gray
render(Flowbite::Badge.new(style: :gray)) { "Gray" }
# Success
render(Flowbite::Badge.new(style: :success)) { "Success" }
# Warning
render(Flowbite::Badge.new(style: :warning)) { "Warning" }

Use these badge styles with multiple colors to indicate status or categories.

No params configured.