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 and matched to shadcn/ui's current button. Renders a , or an when href: is given (their asChild link button). 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" }
render PhlexKit::Button.new(href: "/login") { "Login" }

Mark leading/trailing glyphs with data-icon: "inline-start"/"inline-end" to tighten the near-side padding like theirs. icon: true makes the button square (their icon/icon-xs/… sizes — compose with size:). :primary is their :default; :xl is a kit extra. VARIANTS.fetch/ SIZES.fetch fail loud on a bad value.

Constant Summary

VARIANTS =

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

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

SIZES =

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

Instance Method Summary

• #initialize(variant: :primary, size: :md, type: :button, icon: false, href: nil, **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, href: nil, **attrs) ⇒ Button

Returns a new instance of Button.

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

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

Instance Method Details

#view_template(&block) ⇒ Object

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

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