Badge

Badge { "Badge" }

Badge(variant: :primary) { 'Primary' }

Badge(variant: :outline) { 'Outline' }

div(class: 'flex flex-wrap gap-2 justify-center') do
	Badge(variant: :destructive) { 'Destructive' }
	Badge(variant: :warning) { 'Warning' }
	Badge(variant: :success) { 'Success' }
end

div(class: 'flex flex-wrap gap-2 justify-center') do
	Badge(variant: :red) { 'Red' }
	Badge(variant: :orange) { 'Orange' }
	Badge(variant: :amber) { 'Amber' }
	Badge(variant: :yellow) { 'Yellow' }
	Badge(variant: :lime) { 'Lime' }
	Badge(variant: :green) { 'Green' }
	Badge(variant: :emerald) { 'Emerald' }
	Badge(variant: :teal) { 'Teal' }
	Badge(variant: :cyan) { 'Cyan' }
	Badge(variant: :sky) { 'Sky' }
	Badge(variant: :blue) { 'Blue' }
	Badge(variant: :indigo) { 'Indigo' }
	Badge(variant: :violet) { 'Violet' }
	Badge(variant: :purple) { 'Purple' }
	Badge(variant: :fuchsia) { 'Fuchsia' }
	Badge(variant: :pink) { 'Pink' }
	Badge(variant: :rose) { 'Rose' }
end

div(class: 'flex flex-wrap gap-2 justify-center items-center') do
	Badge(size: :sm) { "Small" }
	Badge(size: :md) { "Medium" }
	Badge(size: :lg) { "Large" }
end