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
<!-- Bordered 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">
  Alternative
</span>
<!-- Bordered 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">
  Brand
</span>
<!-- Bordered 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">
  Danger
</span>
<!-- Bordered 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">
  Gray
</span>
<!-- Bordered 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">
  Success
</span>
<!-- Bordered 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">
  Warning
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Bordered Alternative
render(Flowbite::Badge.new(bordered: true, style: :alternative)) { "Alternative" }
# Bordered Brand
render(Flowbite::Badge.new(bordered: true, style: :brand)) { "Brand" }
# Bordered Danger
render(Flowbite::Badge.new(bordered: true, style: :danger)) { "Danger" }
# Bordered Gray
render(Flowbite::Badge.new(bordered: true, style: :gray)) { "Gray" }
# Bordered Success
render(Flowbite::Badge.new(bordered: true, style: :success)) { "Success" }
# Bordered Warning
render(Flowbite::Badge.new(bordered: true, style: :warning)) { "Warning" }

Add a border accent in a matching color scheme.

No params configured.