Class: Panda::Core::UI::Button

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

Overview

Modern Phlex-based button component with type-safe props.

Supports both <button> and <a> elements based on whether an href is provided. Follows Tailwind UI Plus styling patterns with dark mode support.

Examples:

Basic button

render Panda::Core::UI::Button.new(text: "Click me")

Button as link

render Panda::Core::UI::Button.new(
  text: "Edit",
  variant: :secondary,
  href: "/admin/posts/1/edit"
)

Primary action button

render Panda::Core::UI::Button.new(
  text: "Publish",
  variant: :primary,
  href: "/admin/posts/1/publish"
)

With custom attributes

render Panda::Core::UI::Button.new(
  text: "Submit",
  variant: :primary,
  class: "mt-4",
  data: { turbo_method: :post }
)

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 



53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
# File 'app/components/panda/core/UI/button.rb', line 53

def default_attrs
  base = {
    class: button_classes
  }

  if @href
    base[:href] = @href
  else
    base[:type] = @type
    base[:disabled] = @disabled if @disabled
  end

  base
end

#view_template ⇒ Object 



45
46
47
48
49
50
51
 
# File 'app/components/panda/core/UI/button.rb', line 45

def view_template
  if @href
    a(**@attrs) { @text }
  else
    button(**@attrs) { @text }
  end
end