Button - Rails UI Components

Usage

<%= ui.btn "Default" %>
<%= ui.btn "Outline", variant: :outline %>
<%= ui.btn "Link Button", url: "/path" %>

Block contentText, icons, or HTML. Alternative to passing text as first argument.

Props

Prop	Type	Default	Description
`variant`	`Symbol` `:default` \| `:outline` \| `:secondary` \| `:danger` \| `:ghost` \| `:link`	`:default`	Visual style of the button.
`url`	`String`	`nil`	URL to navigate to. Renders as a link when provided.
`size`	`Symbol` `:xs` \| `:sm` \| `:md` \| `:lg` \| `:icon_xs` \| `:icon_sm` \| `:icon_md` \| `:icon_lg`	`:md`	Size of the button. Icon sizes are for icon-only buttons.
`rounded`	`Boolean`	`false`	Apply fully rounded corners (pill shape).
`block`	`Boolean`	`false`	Make button full width.
`circle`	`Boolean`	`false`	Apply circular shape to the button.
`method`	`Symbol`	`nil`	HTTP method for form submission (e.g., :delete, :post). Only works with `url`.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

Examples

Basic Variants

<%= ui.btn "Default" %>
<%= ui.btn "Outline", variant: :outline %>
<%= ui.btn "Secondary", variant: :secondary %>
<%= ui.btn "Danger", variant: :danger %>
<%= ui.btn "Ghost", variant: :ghost %>
<%= ui.btn "Link", variant: :link %>

Sizes

<%= ui.btn "Button XS", size: :xs %>
<%= ui.btn "Button SM", size: :sm %>
<%= ui.btn "Button MD", size: :md %>
<%= ui.btn "Button LG", size: :lg %>

With Icons

<%= ui.btn size: :md do %>
  <%= ui.icon "plus" %>
  Create
<% end %>

Icon Only

<%= ui.btn ui.icon("plus"), size: :icon_xs %>
<%= ui.btn ui.icon("pencil"), variant: :secondary, size: :icon_sm %>
<%= ui.btn ui.icon("cog"), variant: :outline, size: :icon_md %>
<%= ui.btn ui.icon("trash"), variant: :danger, size: :icon_lg %>

Special Styles

<div class="flex items-center gap-2">
  <%= ui.btn "Rounded", size: :sm, rounded: true %>
  <%= ui.btn "Rounded Secondary", variant: :secondary, size: :sm, rounded: true %>
  <%= ui.btn ui.icon("heart"), size: :icon_md, rounded: true %>
</div>
<%= ui.btn block: true, size: :lg, class: "mt-2" do %>
  <%= ui.icon("arrow-down-tray", size: 6) %>
  Download
<% end %>

As Links

Link Button Link Link Ghost

<%= ui.btn "Link Button", url: root_path %>
<%= ui.btn "Link", url: root_path, variant: :link %>
<%= ui.btn "Link Ghost", url: root_path, variant: :ghost %>