shadcn-rails

Button

Displays a button or a component that looks like a button.

No JavaScript Required

Installation

Add the component to your project:

rails generate shadcn:component button

Usage

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

Examples

Default

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

Secondary

<%= render Shadcn::ButtonComponent.new(variant: :secondary) do %>
  Secondary
<% end %>

Destructive

<%= render Shadcn::ButtonComponent.new(variant: :destructive) do %>
  Destructive
<% end %>

Outline

<%= render Shadcn::ButtonComponent.new(variant: :outline) do %>
  Outline
<% end %>

Ghost

<%= render Shadcn::ButtonComponent.new(variant: :ghost) do %>
  Ghost
<% end %>

Link

<%= render Shadcn::ButtonComponent.new(variant: :link) do %>
  Link
<% end %>

Sizes

<%= render Shadcn::ButtonComponent.new(size: :sm) do %>Small<% end %>
<%= render Shadcn::ButtonComponent.new do %>Default<% end %>
<%= render Shadcn::ButtonComponent.new(size: :lg) do %>Large<% end %>

Icon

<%= render Shadcn::ButtonComponent.new(variant: :outline, size: :icon) do %>
  <svg>...</svg>
<% end %>

With Icon

<%= render Shadcn::ButtonComponent.new do %>
  <svg>...</svg>
  Upload
<% end %>

Loading

<%= render Shadcn::ButtonComponent.new(loading: true, disabled: true) do %>
  Please wait
<% end %>

Disabled

<%= render Shadcn::ButtonComponent.new(disabled: true) do %>
  Disabled
<% end %>

As Link

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

API Reference

Prop Type Default Description
variant Symbol :default Button style variant. Options: :default, :destructive, :outline, :secondary, :ghost, :link
size Symbol :default Button size. Options: :default, :sm, :lg, :icon, :icon_sm, :icon_lg
href String nil If provided, renders as an anchor tag instead of button
type String "button" Button type attribute. Options: button, submit, reset
disabled Boolean false Whether the button is disabled
loading Boolean false Shows loading spinner and disables button
class_name String nil Additional CSS classes to apply
data Hash {} Data attributes to add to the element

Accessibility

  • Uses native <button> element for proper keyboard and screen reader support
  • When disabled: true, sets aria-disabled="true"
  • When loading: true, sets aria-busy="true"
  • When rendered as a link, includes role="button"
  • For icon-only buttons, add an aria-label via the aria: option