Badge

render Badge.new(kind: :primary) { "Badge" }
render Badge.new(kind: :critical) { "Badge" }
render Badge.new(kind: :success) { "Badge" }

Installation

Add the component to your project

CLI

Run the following command in your terminal

bundle exec essence add badge

Manually

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