Class: Panda::Core::UI::Badge

Inherits:
Base
  • Object
show all
Defined in:
app/components/panda/core/UI/badge.rb

Overview

Badge component for status indicators, labels, and counts.

Badges are small, inline elements that highlight an item’s status or provide additional metadata at a glance.

Examples:

Basic badge

render Panda::Core::UI::Badge.new(text: "New")

Status badges

render Panda::Core::UI::Badge.new(text: "Active", variant: :success)
render Panda::Core::UI::Badge.new(text: "Pending", variant: :warning)
render Panda::Core::UI::Badge.new(text: "Error", variant: :danger)

With count

render Panda::Core::UI::Badge.new(text: "99+", variant: :primary, size: :small)

Removable badge

render Panda::Core::UI::Badge.new(
  text: "Tag",
  removable: true,
  data: { action: "click->tags#remove" }
)

Constant Summary

Constants inherited from Base

Base::TAILWIND_MERGER

Instance Method Summary collapse

Methods inherited from Base

#after_template, #attrs, #before_template, #merge_attrs, #tailwind_merge_attrs

Instance Method Details

#default_attrs ⇒ Object 



61
62
63
64
65
 
# File 'app/components/panda/core/UI/badge.rb', line 61

def default_attrs
  {
    class: badge_classes
  }
end

#view_template ⇒ Object 



36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
# File 'app/components/panda/core/UI/badge.rb', line 36

def view_template
  span(**@attrs) do
    plain text
    if removable
      whitespace
      button(
        type: "button",
        class: "inline-flex items-center ml-1 hover:opacity-70",
        aria: {label: "Remove"}
      ) do
        svg(
          class: "h-3 w-3",
          xmlns: "http://www.w3.org/2000/svg",
          viewBox: "0 0 20 20",
          fill: "currentColor"
        ) do |s|
          s.path(
            d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
          )
        end
      end
    end
  end
end