Class: Shadcn::ButtonComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/button_component.rb

Overview

Button component with multiple variants and sizes Matches shadcn/ui Button component

Examples:

Basic button

<%= render Shadcn::ButtonComponent.new do %>
  Click me
<% end %>

Variant and size

<%= render Shadcn::ButtonComponent.new(variant: :destructive, size: :lg) do %>
  Delete
<% end %>

As link

<%= render Shadcn::ButtonComponent.new(href: "/path", variant: :link) do %>
  Go somewhere
<% end %>

Icon button

<%= render Shadcn::ButtonComponent.new(size: :icon, aria: { label: "Settings" }) do %>
  <%= icon "settings" %>
<% end %>

Constant Summary collapse

VARIANTS =

Available button variants

{
  default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
  destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
  outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
  secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
  ghost: "hover:bg-accent hover:text-accent-foreground",
  link: "text-primary underline-offset-4 hover:underline"
}.freeze
SIZES =

Available button sizes

{
  default: "h-9 px-4 py-2",
  sm: "h-8 rounded-md px-3 text-xs",
  lg: "h-10 rounded-md px-8",
  icon: "h-9 w-9",
  icon_sm: "h-8 w-8",
  icon_lg: "h-10 w-10"
}.freeze
BASE_CLASSES =

Base classes applied to all buttons

"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(variant: :default, size: :default, href: nil, type: "button", disabled: false, loading: false, **options) ⇒ ButtonComponent

Returns a new instance of ButtonComponent.

Parameters:

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

    Button style variant (:default, :destructive, :outline, :secondary, :ghost, :link)

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

    Button size (:default, :sm, :lg, :icon, :icon_sm, :icon_lg)

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

    If provided, renders as an anchor tag

  • type (String) (defaults to: "button") —

    Button type attribute (button, submit, reset)

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

    Whether button is disabled

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

    Whether button shows loading state

  • class_name (String, nil) —

    Additional CSS classes

  • data (Hash) —

    Data attributes

  • html_options (Hash) —

    Additional HTML attributes



60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
# File 'app/components/shadcn/button_component.rb', line 60

def initialize(
  variant: :default,
  size: :default,
  href: nil,
  type: "button",
  disabled: false,
  loading: false,
  **options
)
  super(**options)
  @variant = variant.to_sym
  @size = size.to_sym
  @href = href
  @type = type
  @disabled = disabled
  @loading = loading
end