Class: DaisyUI::Button

Inherits:

BaseComponent

• Object
• ViewComponent::Base
• BaseComponent
• DaisyUI::Button

Defined in:

app/components/daisy_ui/actions/button.rb

Overview

Button component implementing DaisyUI’s button styles

Examples:

Basic usage

<%= render(ButtonComponent.new(text: "Click me")) %>

Primary variant

<%= render(ButtonComponent.new(text: "Submit", variant: :primary)) %>

Outline button

<%= render(ButtonComponent.new(text: "Download", style: :outline)) %>

Small size with icon

<%= render(ButtonComponent.new(
  text: "Save",
  size: :sm,
  icon_start: helpers.check_icon
)) %>

Block-level button

<%= render(ButtonComponent.new(
  text: "Full width",
  shape: :block
)) %>

Icon only button

<%= render(ButtonComponent.new(
  icon_start: helpers.search_icon,
  shape: :square
)) %>

Loading state

<%= render(ButtonComponent.new(
  text: "Processing...",
  loading: true
)) %>

Disabled state

<%= render(ButtonComponent.new(
  text: "Disabled",
  disabled: true
)) %>

Active state

<%= render(ButtonComponent.new(
  text: "Pressed",
  active: true
)) %>

With icons

<%= render(ButtonComponent.new(
  text: "Submit",
  icon_start: helpers.check_icon("h-5 w-5"),
  variant: "primary"
)) %>

With both icons

<%= render(ButtonComponent.new(
  text: "Next",
  icon_start: helpers.sync_icon("h-5 w-5"),
  icon_end: helpers.arrow_right_icon("h-5 w-5")
)) %>

With block content

<%= render(ButtonComponent.new) do %>
  Complex <strong>content</strong>
<% end %>

As a link

<%= render(ButtonComponent.new(
  text: "Visit site",
  href: "https://example.com",
  target: "_blank"
)) %>

Form submit button

<%= render(ButtonComponent.new(
  text: "Submit",
  type: "submit",
  variant: "primary"
)) %>

Delete action with Turbo

<%= render(ButtonComponent.new(
  text: "Delete",
  href: item_path(@item),
  method: :delete,
  variant: "error"
)) %>

Constant Summary

COLORS =

Available button colors from DaisyUI

{
  primary: 'btn-primary',
  secondary: 'btn-secondary',
  accent: 'btn-accent',
  neutral: 'btn-neutral',
  ghost: 'btn-ghost',
  link: 'btn-link',
  info: 'btn-info',
  success: 'btn-success',
  warning: 'btn-warning',
  error: 'btn-error'
}.freeze

SIZES =

Available button sizes from DaisyUI

{
  xl: 'btn-xl',
  lg: 'btn-lg',
  md: 'btn-md',
  sm: 'btn-sm',
  xs: 'btn-xs'
}.freeze

VARIANTS =

Available button variants from DaisyUI

{
  outline: 'btn-outline',
  soft: 'btn-soft',
  dash: 'btn-dash',
  ghost: 'btn-ghost',
  link: 'btn-link'
}.freeze

SHAPES =

Available button shape modifiers

{
  wide: 'btn-wide',
  block: 'btn-block',
  circle: 'btn-circle',
  square: 'btn-square'
}.freeze

BUTTON_TYPES =

Valid HTML button types

%w[button submit reset].freeze

Instance Method Summary

• #call ⇒ Object
• #initialize(tag_type: :button, text: nil, color: nil, size: nil, variant: nil, shape: nil, disabled: false, href: nil, type: nil, method: nil, target: nil, rel: nil, loading: false, active: false, icon_start: nil, icon_end: nil, **system_arguments) ⇒ Button constructor

  A new instance of Button.

Constructor Details

#initialize(tag_type: :button, text: nil, color: nil, size: nil, variant: nil, shape: nil, disabled: false, href: nil, type: nil, method: nil, target: nil, rel: nil, loading: false, active: false, icon_start: nil, icon_end: nil, **system_arguments) ⇒ Button

Returns a new instance of Button.

Parameters:

• tag_type (Symbol) (defaults to: :button) —

  HTML tag to use (:button, :input, :a)

• text (String) (defaults to: nil) —

  The text content to display inside the button

• color (String) (defaults to: nil) —

  Visual style of the button (neutral/primary/secondary/accent/info/success/warning/error/ghost/link)

• size (String) (defaults to: nil) —

  Size of the button (xl/lg/md/sm/xs)

• variant (String) (defaults to: nil) —

  Variant of the button (outline/soft/dash)

• shape (String) (defaults to: nil) —

  Shape modifier of the button (wide/block/circle/square)

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

  When true, prevents user interaction and grays out the button

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

  Turns the button into a link pointing to this URL

• type (String) (defaults to: nil) —

  HTML button type attribute (button/submit/reset)

• method (String) (defaults to: nil) —

  HTTP method for Rails/Turbo links (get/post/put/patch/delete)

• target (String) (defaults to: nil) —

  Link target attribute (_blank/_self/_parent/_top)

• rel (String) (defaults to: nil) —

  Link relationship attribute (e.g., noopener, noreferrer)

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

  When true, shows a loading spinner and disables the button

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

  When true, gives the button a pressed appearance

• icon_start (String) (defaults to: nil) —

  SVG icon to display before the text

• icon_end (String) (defaults to: nil) —

  SVG icon to display after the text

• system_arguments (Hash) —

  Additional HTML attributes to be applied to the button

# File 'app/components/daisy_ui/actions/button.rb', line 157

def initialize( # rubocop:disable Metrics/ParameterLists
  tag_type: :button,
  text: nil,
  color: nil,
  size: nil,
  variant: nil,
  shape: nil,
  disabled: false,
  href: nil,
  type: nil,
  method: nil,
  target: nil,
  rel: nil,
  loading: false,
  active: false,
  icon_start: nil,
  icon_end: nil,
  **system_arguments
)
  @tag_type = tag_type
  @color = build_argument(color, COLORS, 'color')
  @size = build_argument(size, SIZES, 'size')
  @variant = build_argument(variant, VARIANTS, 'variant')
  @shape = build_argument(shape, SHAPES, 'shape')
  @disabled = disabled
  @href = href
  @method = method
  @target = target
  @rel = rel
  @loading = loading
  @active = active
  @type = type
  @text = text

  with_start_icon { icon_start } if icon_start
  with_end_icon { icon_end } if icon_end
  super(**system_arguments)
end

Instance Method Details

#call ⇒ Object

# File 'app/components/daisy_ui/actions/button.rb', line 196

def call
  tag.send(@tag_type, **full_arguments) { button_content }
end