Button

Displays a button, or an element that looks like one.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add button --yes

The button registry item installs these files:

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Use the ui_button helper in any view. It takes the same arguments as the component.

<%= ui_button { "Save" } %>
<%= ui_button(variant: :outline, size: :sm) { "Cancel" } %>

Or render the component Ui::ButtonComponent directly:

<%= render Ui::ButtonComponent.new(variant: :destructive) do %>
  Delete
<% end %>

The default variant, used for a screen's primary action.

<%= ui_button { "Button" } %>

A lower-emphasis alternative for secondary actions.

<%= ui_button(variant: :secondary) { "Secondary" } %>

For destructive actions, such as deleting a record.

<%= ui_button(variant: :destructive) { "Destructive" } %>

A border and no fill, for neutral actions.

<%= ui_button(variant: :outline) { "Outline" } %>

No background and no border until hover.

<%= ui_button(variant: :ghost) { "Ghost" } %>

Looks like a text link while keeping button semantics.

<%= ui_button(variant: :link) { "Link" } %>

A square icon-only button (size: :icon). Pass label: on the icon for screen readers.

<%= ui_button(size: :icon, variant: :secondary) do %>
  <%= ui_icon("chevron-right", label: "Next") %>
<% end %>

Put a ui_icon inside the block and the button sizes the SVG for you.

<%= ui_button do %>
  <%= ui_icon("download") %>
  Download
<% end %>

The :sm, :default and :lg sizes side by side.

<%= ui_button(size: :sm) { "Small" } %>
<%= ui_button(size: :default) { "Default" } %>
<%= ui_button(size: :lg) { "Large" } %>

A loading state: a spinning icon, with the button disabled.

<%= ui_button(variant: :outline, disabled: true) do %>
  <%= ui_icon("loader-circle", class: "animate-spin") %>
  Please wait
<% end %>

Pass disabled: true as an HTML attribute.

<%= ui_button(disabled: true) { "Disabled" } %>

Render as an <a> with tag: :a, keeping the button's look.

<%= ui_button(tag: :a, href: "#", variant: :outline) { "Go to the dashboard" } %>

ui_button(**options, &block) wraps Ui::ButtonComponent.new(**options).

Argument	Type	Default	Description
`variant`	Symbol	`:default`	`:default`, `:secondary`, `:destructive`, `:outline`, `:ghost`, `:link`
`size`	Symbol	`:default`	`:default`, `:sm`, `:lg`, `:icon`
`tag`	Symbol	`:button`	The HTML tag to render (e.g. `:button`, `:a`).
`disabled`	Boolean	`false`	Renders `data-disabled`. With `tag: :button` it also renders `disabled` by default.
`focusable_when_disabled`	Boolean	`false`	With `disabled: true`, keeps the native button focusable through `aria-disabled="true"` and `tabindex="0"` instead of `disabled`.
`class` / `class_name`	String	`nil`	Extra classes, merged after the variant and size classes.
`**attrs`	Hash	`{}`	Free HTML attributes (`href`, `data:`, `aria:`, …).
`&block`	Block	—	The button's content: text, a `ui_icon`, or both.