x
1
2
3
4
5
6
7
8
<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-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-secondary text-secondary-foreground hover:bg-secondary/80 h-6 px-2 text-xs leading-none">Secondary</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-destructive text-white hover:bg-destructive/80 h-6 px-2 text-xs leading-none">Destructive</span> <span class="inline-flex items-center justify-center gap-1 rounded-full font-medium whitespace-nowrap border transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 text-foreground border-input h-6 px-2 text-xs leading-none">Outline</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-emerald-500 dark:bg-emerald-600 text-white hover:bg-emerald-500/80 dark:hover:bg-emerald-600/80 h-6 px-2 text-xs leading-none">Success</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-amber-500 dark:bg-amber-600 text-white hover:bg-amber-500/80 dark:hover:bg-amber-600/80 h-6 px-2 text-xs leading-none">Warning</span></div>1
2
3
4
5
6
7
8
<div class="flex flex-wrap items-center gap-3"> <%= render(UI::Badge.new(variant: :default)) { "Default" } %> <%= render(UI::Badge.new(variant: :secondary)) { "Secondary" } %> <%= render(UI::Badge.new(variant: :destructive)) { "Destructive" } %> <%= render(UI::Badge.new(variant: :outline)) { "Outline" } %> <%= render(UI::Badge.new(variant: :success)) { "Success" } %> <%= render(UI::Badge.new(variant: :warning)) { "Warning" } %></div>No notes provided.
No params configured.