Blocks

Button

Triggers an action or event — wraps a plain HTML button with Tailwind variants and sizes.

Installation

bin/rails g shadcnrb:component button

Usage

Pass a label as the first argument or use a block. All extra kwargs are forwarded to the underlying button tag.

<%= sui.button "Save changes" %>

<%= sui.button do %>Custom label<% end %>

Variants

Use variant: to control the visual style.

<!-- variant: :default -->
<%= sui.button "Default", variant: :default %>
<!-- variant: :destructive -->
<%= sui.button "Destructive", variant: :destructive %>
<!-- variant: :outline -->
<%= sui.button "Outline", variant: :outline %>
<!-- variant: :secondary -->
<%= sui.button "Secondary", variant: :secondary %>
<!-- variant: :ghost -->
<%= sui.button "Ghost", variant: :ghost %>
<!-- variant: :link -->
<%= sui.button "Link", variant: :link %>

Sizes

Use size: to adjust the button height and padding.

<!-- size: :sm -->
<%= sui.button "Small", size: :sm %>
<!-- size: :default -->
<%= sui.button "Default", size: :default %>
<!-- size: :lg -->
<%= sui.button "Large", size: :lg %>

With icon

Pass icon: for a leading icon. Without a label, the button renders icon-only at the :icon size. With a label, the icon sits flush left of the text. For trailing icons or custom layouts, use a block.

<!-- icon + text -->
<%= sui.button "Save", icon: :check %>
<!-- icon only (auto size: :icon) -->
<%= sui.button icon: :settings %>
<!-- icon-only, outline variant -->
<%= sui.button icon: :"chevron-right", variant: :outline %>
<!-- trailing icon via block -->
<%= sui.button variant: :outline do %>
  Continue <%= sui.icon :"chevron-right" %>
<% end %>

Icon-only buttons respect the same size variants as text buttons.

<!-- size: :sm -->
<%= sui.button icon: :settings, size: :sm %>
<!-- size: :default (default when icon + no label) -->
<%= sui.button icon: :settings %>
<!-- size: :lg -->
<%= sui.button icon: :settings, size: :lg %>

Rails helpers

sui.button_to generates a mini-form (CSRF + Turbo-safe). For button-styled anchors, use sui.link_to with any Button variant — see Link.

<%= sui.button_to "Post action", "#", method: :post, variant: :secondary %>

API

Prop	Type	Default	Description
`variant`	Symbol	`:default`	Visual style — one of `:default` `:destructive` `:outline` `:secondary` `:ghost` `:link`
`size`	Symbol	`:default`	Button size — one of `:xs` `:sm` `:default` `:lg` `:icon`
`name`	String	`nil`	Label text when no block is given
`type`	String	`"button"`	HTML button type attribute (`"button"`, `"submit"`, `"reset"`)

Next: Badge →