Menu
render Badge.new(kind: :primary) { "Badge" } render Badge.new(kind: :critical) { "Badge" } render Badge.new(kind: :success) { "Badge" }
Add the component to your project
Run the following command in your terminal
bundle exec essence add badge
Copy and paste the following code into your project
# frozen_string_literal: true
class Components::Badge < Components::Essence
BASE = "inline-flex items-center justify-center w-fit rounded-full border border-transparent font-medium transition duration-150 hover:opacity-90"
SIZES = {
none: "",
sm: "text-[0.65rem] px-2 py-0.5 gap-1 min-w-8",
md: "text-xs px-2.5 py-1 gap-2 min-w-12",
lg: "text-sm px-4 py-1 gap-2 min-w-16"
}
KINDS = {
primary: "text-gray-900 border-gray-200",
success: "text-white bg-emerald-500",
critical: "text-white bg-rose-500",
warning: "text-white bg-amber-500",
info: "text-white bg-blue-500",
dark: "text-white bg-gray-900",
white: "text-gray-900 bg-white"
}
attr_reader :kind, :size
def initialize(kind: :primary, size: :md, **attributes)
@size = size
@kind = kind
super(**attributes)
end
def view_template(&)
div(**attributes, &)
end
private
def initialize_merged_classes = merge_classes(BASE, SIZES[size], KINDS[kind], attributes[:class])
end
This is how you can use this component
Attribute
Description