Class: Flowbite::Badge

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/flowbite/badge.rb,
app/components/flowbite/badge/dot.rb,
app/components/flowbite/badge/pill.rb

Overview

Renders a badge component for displaying labels, counts, or status indicators.

Examples:

Basic usage

<%= render(Flowbite::Badge.new) { "Default" } %>

With border

<%= render(Flowbite::Badge.new(bordered: true, style: :success)) { "Success" } %>

See Also:

Direct Known Subclasses

Pill

Defined Under Namespace

Classes: Dot, Pill

Constant Summary collapse

SIZES = 
{
  default: ["text-xs", "font-medium", "px-1.5", "py-0.5"],
  lg: ["text-sm", "font-medium", "px-2", "py-1"]
}.freeze
BORDER_CLASSES = 
{
  alternative: ["border", "border-default"],
  brand: ["border", "border-brand-subtle"],
  danger: ["border", "border-danger-subtle"],
  gray: ["border", "border-default-medium"],
  success: ["border", "border-success-subtle"],
  warning: ["border", "border-warning-subtle"]
}.freeze

Instance Attribute Summary collapse

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(bordered: false, class: nil, dot: false, href: nil, size: :default, style: :brand, **options) ⇒ Badge

Returns a new instance of Badge.

Parameters:

  • bordered (Boolean) (defaults to: false) —

    Whether to add a border to the badge.

  • class (String, Array<String>) (defaults to: nil) —

    Additional CSS classes.

  • dot (Boolean) (defaults to: false) —

    Whether to show a dot indicator.

  • href (String) (defaults to: nil) —

    If provided, renders the badge as a link.

  • size (Symbol) (defaults to: :default) —

    The size of the badge (:default or :lg).

  • style (Symbol) (defaults to: :brand) —

    The color style (:alternative, :brand, :danger, :gray, :success, :warning).



74
75
76
77
78
79
80
81
82
83
 
# File 'app/components/flowbite/badge.rb', line 74

def initialize(bordered: false, class: nil, dot: false, href: nil,
  size: :default, style: :brand, **options)
  @bordered = bordered
  @class = Array.wrap(binding.local_variable_get(:class))
  @dot = dot
  @href = href
  @size = size
  @style = style
  @options = options
end

Instance Attribute Details

#options ⇒ Object (readonly)

Returns the value of attribute options.



65
66
67
 
# File 'app/components/flowbite/badge.rb', line 65

def options
  @options
end

Class Method Details

.classes(size: :default, state: :default, style: :brand) ⇒ Object 



31
32
33
 
# File 'app/components/flowbite/badge.rb', line 31

def classes(size: :default, state: :default, style: :brand)
  styles.fetch(style).fetch(state) + sizes.fetch(size)
end

.sizes ⇒ Object 



35
36
37
 
# File 'app/components/flowbite/badge.rb', line 35

def sizes
  SIZES
end

.styles ⇒ Object

rubocop:disable Layout/LineLength



40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
# File 'app/components/flowbite/badge.rb', line 40

def styles
  Flowbite::Styles.from_hash({
    alternative: {
      default: ["bg-neutral-primary-soft", "hover:bg-neutral-secondary-medium", "rounded", "text-heading"]
    },
    brand: {
      default: ["bg-brand-softer", "hover:bg-brand-soft", "rounded", "text-fg-brand-strong"]
    },
    danger: {
      default: ["bg-danger-soft", "hover:bg-danger-medium", "rounded", "text-fg-danger-strong"]
    },
    gray: {
      default: ["bg-neutral-secondary-medium", "hover:bg-neutral-tertiary-medium", "rounded", "text-heading"]
    },
    success: {
      default: ["bg-success-soft", "hover:bg-success-medium", "rounded", "text-fg-success-strong"]
    },
    warning: {
      default: ["bg-warning-soft", "hover:bg-warning-medium", "rounded", "text-fg-warning"]
    }
  }.freeze)
end

Instance Method Details

#bordered? ⇒ Boolean

Returns:

  • (Boolean) 


85
86
87
 
# File 'app/components/flowbite/badge.rb', line 85

def bordered?
  !!@bordered
end

#dot? ⇒ Boolean

Returns:

  • (Boolean) 


89
90
91
 
# File 'app/components/flowbite/badge.rb', line 89

def dot?
  !!@dot
end

#link? ⇒ Boolean

Returns:

  • (Boolean) 


93
94
95
 
# File 'app/components/flowbite/badge.rb', line 93

def link?
  @href.present?
end