x
1
2
3
4
5
<div class="flex flex-wrap items-center gap-3"> <span class="inline-flex items-center justify-center gap-1 rounded-full font-medium whitespace-nowrap border border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 bg-primary text-primary-foreground hover:bg-primary/80 h-5 px-1.5 text-[10px] leading-none">Small</span> <span class="inline-flex items-center justify-center gap-1 rounded-full font-medium whitespace-nowrap border border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 bg-primary text-primary-foreground hover:bg-primary/80 h-6 px-2 text-xs leading-none">Default</span> <span class="inline-flex items-center justify-center gap-1 rounded-full font-medium whitespace-nowrap border border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 bg-primary text-primary-foreground hover:bg-primary/80 h-7 px-2.5 text-sm leading-none">Large</span></div>1
2
3
4
5
<div class="flex flex-wrap items-center gap-3"> <%= render(UI::Badge.new(size: :sm)) { "Small" } %> <%= render(UI::Badge.new(size: :default)) { "Default" } %> <%= render(UI::Badge.new(size: :lg)) { "Large" } %></div>No notes provided.
No params configured.