add badge as a ui component

Gemfile.lock

@@ -728,6 +728,7 @@ GEM
     zeitwerk (2.7.3)
 
 PLATFORMS
+  arm64-darwin-23
   arm64-darwin-24
   x86_64-linux
 

app/components/avo/u_i/badge_component.html.erb

@@ -0,0 +1,9 @@
+<span class="<%= badge_classes %>" style="<%= badge_style %>"<%= tag.attributes(options) %>>
+  <%= render_icon_content if icon.present? && icon_position == "left" %>
+
+  <% if label.present? %>
+    <span class="truncate"><%= label %></span>
+  <% end %>
+
+  <%= render_icon_content_right if icon.present? && icon_position == "right" %>
+</span>

app/components/avo/u_i/badge_component.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+class Avo::UI::BadgeComponent < Avo::BaseComponent
+  STYLES = %w[solid subtle].freeze
+
+  # Use centralized color definitions
+  COLOR_DEFINITIONS = Avo::UI::Colors::DEFINITIONS
+  COLOR_ALIASES = Avo::UI::Colors::ALIASES
+  VALID_COLORS = Avo::UI::Colors::ALL
+
+  def initialize(
+    label: '',
+    color: 'secondary',
+    style: 'subtle',
+    icon: nil,
+    icon_position: 'left',
+    rounded: true,
+    **options
+  )
+    @label = label.to_s
+    @color = normalize_color(color.to_s)
+    @style = style.to_s
+    @icon = icon&.to_s
+    @icon_position = icon_position.to_s
+    @rounded = rounded
+    @options = options
+
+    validate_params!
+
+    super()
+  end
+
+  private
+
+  attr_reader :label, :color, :style, :icon, :icon_position, :rounded, :options
+
+  def normalize_color(value)
+    # Map aliases to their canonical color names
+    normalized = COLOR_ALIASES[value] || value
+
+    # Fallback to 'secondary' if color is invalid
+    VALID_COLORS.include?(normalized) ? normalized : 'secondary'
+  end
+
+  def color_definition
+    # For solid style, use -secondary variant if it exists (dark bg, light text)
+    if @style == 'solid'
+      secondary_color = "#{color}-secondary"
+      return COLOR_DEFINITIONS[secondary_color] if COLOR_DEFINITIONS.key?(secondary_color)
+    end
+
+    # Default: use the base color (always valid due to normalize_color)
+    COLOR_DEFINITIONS[color]
+  end
+
+  def text_color
+    color_definition[:text]
+  end
+
+  def bg_color
+    color_definition[:bg]
+  end
+
+  def validate_params!
+    raise ArgumentError, "Invalid style: #{style}. Must be one of #{STYLES.join(', ')}" unless STYLES.include?(style)
+
+    return if %w[left right].include?(icon_position)
+
+    raise ArgumentError, "Invalid icon_position: #{icon_position}. Must be 'left' or 'right'"
+  end
+
+  def badge_classes
+    classes = [
+      'inline-flex items-center justify-center transition-colors',
+      'focus:outline-none focus:ring-2 focus:ring-offset-2',
+      'px-2 py-0.5 text-xs gap-0.5 text-center' # x:8px, y:2px, gap:2px, height:24px
+    ]
+
+    classes << 'rounded-md' if rounded
+
+    classes.compact.join(' ')
+  end
+
+  def badge_style
+    # Figma specs: height:24px, font-size:12px, font-weight:500, line-height:16px
+    "height: 24px; font-size: 12px; font-weight: 500; line-height: 16px; background-color: #{bg_color}; color: #{text_color};"
+  end
+
+  def icon_classes
+    'shrink-0 w-3 h-3'
+  end
+
+  def icon_style
+    "color: #{text_color};"
+  end
+
+  def render_icon_content
+    return unless icon.present?
+
+    return unless icon_position == 'left'
+
+    helpers.svg(icon, class: icon_classes, style: icon_style)
+  end
+
+  def render_icon_content_right
+    return unless icon.present? && icon_position == 'right'
+
+    helpers.svg(icon, class: icon_classes, style: icon_style)
+  end
+end

lib/avo/u_i/colors.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Avo
+  module UI
+    # Centralized color definitions for Avo UI components
+    # Colors are based on Figma design system specifications
+    module Colors
+      # Badge and UI component color definitions with exact hex codes
+      DEFINITIONS = {
+        'secondary' => { text: '#171717', bg: '#F6F6F6' },
+        'success' => { text: '#0D8E54', bg: '#D3F8E0' },
+        'informative' => { text: '#068AFF', bg: '#D6F1FF' },
+        'warning' => { text: '#DB6704', bg: '#FFEFC6' },
+        'error' => { text: '#DE3024', bg: '#FEE4E2' },
+
+        'orange' => { text: '#C2410C', bg: '#FFEDD5' },
+        'orange-secondary' => { text: '#F6F6F6', bg: '#FB923C' },
+        'yellow' => { text: '#FB923C', bg: '#FEF9C3' },
+        'yellow-secondary' => { text: '#F6F6F6', bg: '#FACC15' },
+        'green' => { text: '#15803D', bg: '#DCFCE7' },
+        'green-secondary' => { text: '#F6F6F6', bg: '#22C55E' },
+        'teal' => { text: '#0F766E', bg: '#CCFBF1' },
+        'teal-secondary' => { text: '#F6F6F6', bg: '#2DD4BF' },
+        'blue' => { text: '#1D4ED8', bg: '#DBEAFE' },
+        'blue-secondary' => { text: '#F6F6F6', bg: '#3B82F6' },
+        'purple' => { text: '#7E22CE', bg: '#F3E8FF' },
+        'purple-secondary' => { text: '#F6F6F6', bg: '#A855F7' }
+      }.freeze
+
+      # Color name aliases for backward compatibility
+      ALIASES = {
+        'info' => 'informative',
+        'danger' => 'error'
+      }.freeze
+
+      # All valid color names (including aliases)
+      ALL = (DEFINITIONS.keys + ALIASES.keys).freeze
+
+      # Normalize a color name (resolve aliases)
+      def self.normalize(color_name)
+        ALIASES[color_name.to_s] || color_name.to_s
+      end
+
+      # Get color definition for a given color name
+      def self.get(color_name, fallback: 'secondary')
+        normalized = normalize(color_name)
+        DEFINITIONS[normalized] || DEFINITIONS[fallback]
+      end
+
+      # Check if a color is valid
+      def self.valid?(color_name)
+        ALL.include?(color_name.to_s)
+      end
+    end
+  end
+end
+