Class: UI::Badge

Inherits:
Phlex::HTML
  • Object
show all
Includes:
BadgeBehavior
Defined in:
app/components/ui/badge.rb

Overview

Badge - Phlex implementation

Displays a badge or a component that looks like a badge. Uses BadgeBehavior module for shared styling logic.

Based on shadcn/ui Badge: ui.shadcn.com/docs/components/badge

Examples:

Basic usage

render UI::Badge.new { "New" }

With variant

render UI::Badge.new(variant: :destructive) { "Error" }

As a link

a(href: "/notifications", class: "no-underline") do
  render UI::Badge.new { "5" }
end

Instance Method Summary collapse

Methods included from BadgeBehavior

#badge_classes, #badge_html_attributes

Constructor Details

#initialize(variant: :default, classes: "", **attributes) ⇒ Badge

Returns a new instance of Badge.

Parameters:

  • variant (Symbol, String) (defaults to: :default) —

    Visual style variant (:default, :secondary, :destructive, :outline)

  • classes (String) (defaults to: "") —

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



26
27
28
29
30
 
# File 'app/components/ui/badge.rb', line 26

def initialize(variant: :default, classes: "", **attributes)
  @variant = variant
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template(&block) ⇒ Object 



32
33
34
35
36
 
# File 'app/components/ui/badge.rb', line 32

def view_template(&block)
  span(**badge_html_attributes.deep_merge(@attributes)) do
    yield if block_given?
  end
end