Class: PhlexKit::Button

Inherits:

BaseComponent

• Object
• Phlex::HTML
• BaseComponent
• PhlexKit::Button

Defined in:

app/components/phlex_kit/button/button.rb

Overview

Button, ported from ruby_ui's RubyUI::Button (https://ruby-ui.com) to full variant/size parity. Renders a ; the mix pass-through means a caller's class: augments ours and a phlex-reactive **on(:event) bundle flows straight onto the element:

render PhlexKit::Button.new(variant: :primary, **on(:publish)) { "Approve" }

For a button-styled link, put the classes on an directly (class: "pk-button outline sm") — that's ruby_ui's Link approach.

Variants/sizes mirror ruby_ui; Tailwind is replaced with vanilla .pk-button CSS (button.css). VARIANTS.fetch/SIZES.fetch fail loud on a bad value.

Constant Summary

VARIANTS =

variant => modifier class. Default is :primary (the filled brand button), matching ruby_ui.

{
  primary: "primary",
  secondary: "secondary",
  destructive: "destructive",
  outline: "outline",
  ghost: "ghost",
  link: "link"
}.freeze

SIZES =

{
  sm: "sm",
  md: nil,
  lg: "lg",
  xl: "xl"
}.freeze

Instance Method Summary

• #initialize(variant: :primary, size: :md, type: :button, icon: false, **attrs) ⇒ Button constructor

  A new instance of Button.

• #view_template(&block) ⇒ Object

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(variant: :primary, size: :md, type: :button, icon: false, **attrs) ⇒ Button

Returns a new instance of Button.

# File 'app/components/phlex_kit/button/button.rb', line 33

def initialize(variant: :primary, size: :md, type: :button, icon: false, **attrs)
  @variant = variant.to_sym
  @size = size.to_sym
  @type = type
  @icon = icon
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object

# File 'app/components/phlex_kit/button/button.rb', line 41

def view_template(&block)
  button(**mix({ type: @type, class: classes }, @attrs), &block)
end