shadcn-rails

Button

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

No JavaScript Required
button/default 
<%= render Shadcn::ButtonComponent.new do %>Default<% end %>

Installation

Add the component to your project:

rails generate shadcn:add button

Usage

<%= render Shadcn::ButtonComponent.new do %>Default<% 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

<div class="flex items-center gap-4">
  <%= 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 %>
</div>

Icon

<div class="flex items-center gap-4">
  <%= render Shadcn::ButtonComponent.new(variant: :outline, size: :icon) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  <% end %>
  <%= render Shadcn::ButtonComponent.new(variant: :outline, size: :icon_sm) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  <% end %>
  <%= render Shadcn::ButtonComponent.new(variant: :outline, size: :icon_lg) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  <% end %>
</div>

With Icon

<%= render Shadcn::ButtonComponent.new do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></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: "#", variant: :outline) do %>Go to page<% end %>

All Variants

button/variants 
<div class="flex flex-wrap gap-2">
  <%= render Shadcn::Button.new { "Default" } %>
  <%= render Shadcn::Button.new(variant: :secondary) { "Secondary" } %>
  <%= render Shadcn::Button.new(variant: :destructive) { "Destructive" } %>
  <%= render Shadcn::Button.new(variant: :outline) { "Outline" } %>
  <%= render Shadcn::Button.new(variant: :ghost) { "Ghost" } %>
  <%= render Shadcn::Button.new(variant: :link) { "Link" } %>
</div>

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