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
<div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 p-1 text-xs h-fit px-2.5 py-0.5">Info</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 p-1 text-xs h-fit px-2.5 py-0.5">Dark</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300 p-1 text-xs h-fit px-2.5 py-0.5">Failure</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300 p-1 text-xs h-fit px-2.5 py-0.5">Success</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300 p-1 text-xs h-fit px-2.5 py-0.5">Warning</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300 p-1 text-xs h-fit px-2.5 py-0.5">Indigo</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 p-1 text-xs h-fit px-2.5 py-0.5">Purple</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300 p-1 text-xs h-fit px-2.5 py-0.5">Pink</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200 p-1 text-xs h-fit px-2.5 py-0.5">Cyan</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-400 p-1 text-xs h-fit px-2.5 py-0.5">Lime</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-400 p-1 text-xs h-fit px-2.5 py-0.5">Teal</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-blue-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Info</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-gray-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Dark</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-red-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Failure</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-green-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Success</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-yellow-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Warning</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-indigo-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Indigo</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-purple-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Purple</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-pink-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Pink</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-cyan-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Cyan</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-lime-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Lime</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm text-white bg-teal-500 border-1 border-white dark:border-gray-900 p-1 text-xs h-fit px-2.5 py-0.5">Solid Teal</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border border-blue-400 p-1 text-xs h-fit px-2.5 py-0.5">Info Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border border-gray-500 p-1 text-xs h-fit px-2.5 py-0.5">Dark Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border border-red-400 p-1 text-xs h-fit px-2.5 py-0.5">Failure Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border border-green-400 p-1 text-xs h-fit px-2.5 py-0.5">Success Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border border-yellow-300 p-1 text-xs h-fit px-2.5 py-0.5">Warning Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border border-indigo-400 p-1 text-xs h-fit px-2.5 py-0.5">Indigo Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border border-purple-400 p-1 text-xs h-fit px-2.5 py-0.5">Purple Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border border-pink-400 p-1 text-xs h-fit px-2.5 py-0.5">Pink Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200 border border-cyan-400 p-1 text-xs h-fit px-2.5 py-0.5">Cyan Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-400 border border-lime-400 p-1 text-xs h-fit px-2.5 py-0.5">Lime Bordered</div><div class="inline-flex items-center gap-1 font-medium me-2 rounded-sm bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-400 border border-teal-400 p-1 text-xs h-fit px-2.5 py-0.5">Teal Bordered</div>1
2
3
4
5
6
<% Fluxbit::Config::BadgeComponent.styles[:colors].keys.each do |color| %> <%= fx_badge( color: color, with_content: color.to_s.titlecase, ) %><% end %>No notes provided.
No params configured.