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
<!-- Pill Alternative -->
<span class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium rounded-full text-heading text-xs font-medium px-1.5 py-0.5">
  Alternative
</span>
<!-- Pill Brand -->
<span class="bg-brand-softer hover:bg-brand-soft rounded-full text-fg-brand-strong text-xs font-medium px-1.5 py-0.5">
  Brand
</span>
<!-- Pill Danger -->
<span class="bg-danger-soft hover:bg-danger-medium rounded-full text-fg-danger-strong text-xs font-medium px-1.5 py-0.5">
  Danger
</span>
<!-- Pill Gray -->
<span class="bg-neutral-secondary-medium hover:bg-neutral-tertiary-medium rounded-full text-heading text-xs font-medium px-1.5 py-0.5">
  Gray
</span>
<!-- Pill Success -->
<span class="bg-success-soft hover:bg-success-medium rounded-full text-fg-success-strong text-xs font-medium px-1.5 py-0.5">
  Success
</span>
<!-- Pill Warning -->
<span class="bg-warning-soft hover:bg-warning-medium rounded-full 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
# Pill Alternative
render(Flowbite::Badge::Pill.new(style: :alternative)) { "Alternative" }
# Pill Brand
render(Flowbite::Badge::Pill.new(style: :brand)) { "Brand" }
# Pill Danger
render(Flowbite::Badge::Pill.new(style: :danger)) { "Danger" }
# Pill Gray
render(Flowbite::Badge::Pill.new(style: :gray)) { "Gray" }
# Pill Success
render(Flowbite::Badge::Pill.new(style: :success)) { "Success" }
# Pill Warning
render(Flowbite::Badge::Pill.new(style: :warning)) { "Warning" }

Make the corners even more rounded like pills.

No params configured.