Class: Flowbite::Button

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

Overview

Renders a HTML button element.

See flowbite.com/docs/components/buttons/

All other parameters are optional and are passed directly to the button tag as HTML attributes.

Direct Known Subclasses

Outline, Pill

Defined Under Namespace

Classes: Outline, Pill

Constant Summary collapse

SIZES = 
{
  xs: ["text-xs", "px-3", "py-1.5"],
  sm: ["text-sm", "px-3", "py-2"],
  default: ["text-sm", "px-4", "py-2.5"],
  lg: ["text-base", "px-5", "py-3"],
  xl: ["text-base", "px-6", "py-3.5"]
}.freeze

Instance Attribute Summary collapse

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(class: nil, size: :default, style: :default, **button_attributes) ⇒ Button

Returns a new instance of Button.



68
69
70
71
72
73
 
# File 'app/components/flowbite/button.rb', line 68

def initialize(class: nil, size: :default, style: :default, **button_attributes)
  @class = Array.wrap(binding.local_variable_get(:class))
  @size = size
  @style = style
  @button_attributes = button_attributes
end

Instance Attribute Details

#button_attributes ⇒ Object (readonly)

Returns the value of attribute button_attributes.



66
67
68
 
# File 'app/components/flowbite/button.rb', line 66

def button_attributes
  @button_attributes
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



66
67
68
 
# File 'app/components/flowbite/button.rb', line 66

def size
  @size
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



66
67
68
 
# File 'app/components/flowbite/button.rb', line 66

def style
  @style
end

Class Method Details

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



22
23
24
25
26
 
# File 'app/components/flowbite/button.rb', line 22

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

.sizes ⇒ Object 



28
29
30
 
# File 'app/components/flowbite/button.rb', line 28

def sizes
  SIZES
end

.styles ⇒ Object

rubocop:disable Layout/LineLength



33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
# File 'app/components/flowbite/button.rb', line 33

def styles
  Flowbite::Styles.from_hash(
    {
      danger: {
        default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
      },
      dark: {
        default: ["focus:outline-none", "text-white", "bg-dark", "box-border", "border", "border-transparent", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
      },
      default: {
        default: ["focus:outline-none", "text-white", "bg-brand", "box-border", "border", "border-transparent", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
      },
      ghost: {
        default: ["focus:outline-none", "text-heading", "bg-transparent", "box-border", "border", "border-transparent", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "font-medium", "leading-5", "rounded-base"]
      },
      secondary: {
        default: ["focus:outline-none", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
      },
      success: {
        default: ["focus:outline-none", "text-white", "bg-success", "box-border", "border", "border-transparent", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
      },
      tertiary: {
        default: ["focus:outline-none", "text-body", "bg-neutral-primary-soft", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
      },
      warning: {
        default: ["focus:outline-none", "text-white", "bg-warning", "box-border", "border", "border-transparent", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
      }
    }.freeze
  )
end

Instance Method Details

#call ⇒ Object 



75
76
77
78
79
80
81
 
# File 'app/components/flowbite/button.rb', line 75

def call
  content_tag(
    :button,
    content,
    **options
  )
end