Button To

A component that renders <form><button></form> for RESTful actions. Works exactly like Rails' button_to helper with full RapidRailsUI styling.

Key Features

RESTful Actions, Full support for POST, PATCH, PUT, DELETE methods
Rails Integration, Works like Rails' button_to with CSRF protection
All Button Styles, Supports all variants, colors, sizes, and shapes
Icon Support, Leading and trailing icons with color override
Confirmation Dialogs, Turbo confirm support for destructive actions
Form Options, Custom form classes and Turbo/AJAX support
States, Loading and disabled states with proper accessibility
Turbo Loading Text, Automatic text swap during form submission via loading_text
Block Content, Custom HTML layouts with badges or indicators
Single-Click Actions, Delete, Publish, Archive, Subscribe, and more
Not for Navigation, Use Rails link_to for GET requests instead
Not for Form Submissions, Use rui_button with form builders instead

Basic Usage

The method: parameter is required for clarity. The component supports both positional and keyword argument styles:


<%= rui_button_to("Delete", post_path(@post), method: :delete) %>

<%= rui_button_to(text: "Delete", url: post_path(@post), method: :delete) %>

DELETE Request

Most common use case - deleting resources.

<%= rui_button_to("Delete",
                   post_path(@post),
                   method: :delete,
                   color: :danger) %>

PATCH Request

For updating specific actions.

<%= rui_button_to("Publish",
                   publish_post_path(@post),
                   method: :patch,
                   color: :success) %>

POST Request

For creating resources or triggering actions.

<%= rui_button_to("Subscribe",
                   subscribe_path,
                   method: :post,
                   color: :primary) %>

PUT Request

For full resource updates.

<%= rui_button_to("Replace",
                   user_path(@user),
                   method: :put,
                   color: :secondary) %>

Confirmation Dialogs

Use Turbo's data-turbo-confirm for confirmation prompts before actions execute.

Simple Confirmation

<%= rui_button_to("Delete Account",
                   user_path(@user),
                   method: :delete,
                   color: :danger,
                   data: {
                     turbo_confirm: "Are you sure?"
                   }) %>

Detailed Message

<%= rui_button_to("Delete Post",
                   post_path(@post),
                   method: :delete,
                   color: :danger,
                   data: {
                     turbo_confirm: "This cannot be undone!"
                   }) %>

Styling Options

All button styling options are supported (variants, colors, sizes, shapes).

Variants

<%= rui_button_to("Delete", path, method: :delete, variant: :solid) %>
<%= rui_button_to("Delete", path, method: :delete, variant: :outline) %>

Colors

Sizes

Shapes

States

Disabled

<%= rui_button_to("Delete",
                   post_path(@post),
                   method: :delete,
                   disabled: true) %>

Loading

<%= rui_button_to("Deleting...",
                   post_path(@post),
                   method: :delete,
                   loading: true) %>

Full Width

<%= rui_button_to("Delete Account",
                   user_path(@user),
                   method: :delete,
                   full_width: true,
                   color: :danger) %>

Turbo Loading Text

Use loading_text to show different text during form submission. Turbo automatically swaps the button text and disables it while the request is in flight.

<%= rui_button_to("Delete",
                   post_path(@post),
                   method: :delete,
                   loading_text: "Deleting...",
                   color: :danger) %>

<%= rui_button_to("Publish",
                   publish_path(@post),
                   method: :patch,
                   loading_text: "Publishing...",
                   color: :success) %>

How it works: The loading_text adds a data-turbo-submits-with attribute. Turbo handles the UX automatically - swapping text and disabling the button during submission. No JavaScript required!

Try it live

The Post form uses loading_text on its Delete button. Edit any post and click "Delete" to see the button text change to "Deleting..." during the action.

View Posts

Form Options

With Hidden Parameters

Pass additional data as hidden form fields.

<%= rui_button_to("Approve",
                   approve_path(@request),
                   method: :post,
                   params: {
                     status: "approved",
                     notify: true
                   },
                   color: :success) %>

Custom Form Class

Style the form wrapper (useful for inline display).

<%= rui_button_to("Delete",
                   post_path(@post),
                   method: :delete,
                   form_class: "inline-block",
                   color: :danger) %>

Remote (Turbo/AJAX)

Submit via Turbo for AJAX requests.

<%= rui_button_to("Like",
                   like_post_path(@post),
                   method: :post,
                   remote: true,
                   color: :primary) %>

CSRF Token Control

Skip or customize CSRF token (use cautiously).

<%= rui_button_to("Public Action",
                   public_path,
                   method: :post,
                   authenticity_token: false) %>

With Icons

Add icons to buttons using the icon slot. Icons automatically inherit the button's color. Requires: The lucide-rails gem must be installed. See Icon Component for details.

Common RESTful Action Icons

Perfect for CRUD operations and state changes:

<%= rui_button_to("Delete", post_path(@post),
                  method: :delete,
                  color: :danger) do |button| %>
  <% button.with_icon(name: :"trash-2") %>
<% end %>

Icon Positioning

Leading Icons

Trailing Icons


<%= rui_button_to("Continue", next_path, method: :post) do |button| %>
  <% button.with_icon(name: :"arrow-right", position: :trailing) %>
<% end %>

Common Action Patterns

Typical RESTful action icon combinations:

Browse 1500+ available icons at lucide.dev/icons

Block Content (Custom Layouts)

Use block syntax for icons, badges, or any custom HTML inside the button.

Icon + Text

<%= rui_button_to(post_path(@post), method: :delete, color: :danger) do %>
  <svg class="w-4 h-4 mr-1 inline-block">...</svg>
  <span>Delete</span>
<% end %>

Badge + Text

<%= rui_button_to(archive_posts_path, method: :post) do %>
  <span>Archive All</span>
  <span class="ml-2 px-2 bg-zinc-500 text-white text-xs rounded-full">
    <%= @posts.count %>
  </span>
<% end %>

Status Indicator

<%= rui_button_to(approve_path(@request), method: :patch, color: :success) do %>
  <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
  <span>Approve</span>
<% end %>

Loading Spinner

<%= rui_button_to(publish_path(@post), method: :patch) do %>
  <svg class="animate-spin w-4 h-4 mr-2 inline-block">...</svg>
  <span>Publishing...</span>
<% end %>

Note: When using block content, the text parameter is ignored. The block content becomes the button's inner HTML.

Live Examples

See rui_button_to in action with real DELETE actions, confirmations, and Turbo integration.

Interactive Example

Visit the Post index to see DELETE buttons with confirmation dialogs in action.

View All Posts

Quick Reference

Delete Action:

<%= rui_button_to("Delete", post_path(@post), method: :delete, color: :danger) %>

With Confirmation:

<%= rui_button_to("Delete", path, method: :delete, data: { turbo_confirm: "Sure?" }) %>

Publish Action:

<%= rui_button_to("Publish", publish_path(@post), method: :patch, color: :success) %>

With Hidden Params:

<%= rui_button_to("Approve", path, method: :post, params: { status: "approved" }) %>

Accessibility

The ButtonTo component follows WAI-ARIA best practices for accessible form submission buttons.

ARIA Attributes

aria-disabled="true" when button is disabled
aria-busy="true" during loading/submission state
CSRF token included automatically for security
Confirmation dialogs use native browser prompts (accessible)

Keyboard Navigation

Tab to focus the button
Enter or Space to submit the form
Visible focus ring for keyboard users
Confirmation dialog keyboard accessible (Tab, Enter, Escape)

Semantic HTML

Wrapped in <form> for proper HTTP method handling
Native <button type="submit"> element
Hidden _method field for DELETE/PATCH/PUT requests
Turbo integration for seamless navigation

Screen Reader Support

Button text announced as accessible name
Use descriptive text for destructive actions (e.g., "Delete Post" not just "Delete")
Loading/disabled states announced appropriately

API Reference

rui_button_to

RESTful button that renders form+button for POST/PATCH/PUT/DELETE actions

Parameter	Type	Default	Description
text*	String	—	Button label text (positional or keyword)
url*	String	—	URL or Rails path helper (positional or keyword)
method*	Symbol	—	HTTP method: :get, :post, :patch, :put, :delete

Appearance

Visual styling options (same as Button component)

Parameter	Type	Default	Description
variant	Symbol	`:solid`	:solid, :outline, :ghost, :soft, :link
color	Symbol	`:primary`	Any semantic or Tailwind color
size	Symbol	`:sm`	:xs, :sm, :base, :md, :lg, :xl
shape	Symbol	`:rounded`	:square, :rounded, :pill

States

Button state options

Parameter	Type	Default	Description
disabled	Boolean	`false`	Disable button interaction
loading	Boolean	`false`	Show loading state with spinner
loading_text	String	—	Text shown during Turbo form submission (adds data-turbo-submits-with)
full_width	Boolean	`false`	Make button full width

Form Options

Form-specific configuration

Parameter	Type	Default	Description
form_class	String	`"button_to"`	CSS class for form wrapper
params	Hash	—	Additional hidden form parameters
remote	Boolean	`false`	Submit via Turbo/AJAX
authenticity_token	Boolean/String	—	CSRF token (false to skip, string for custom)
data	Hash	`{}`	Data attributes (e.g., turbo_confirm)

Slots

Content slots for customizing component parts

Slot	Description
icon	Add icon via button.with_icon(name: :icon_name, position: :leading/:trailing)

Related Components

Button

Interactive controls with automatic form integration and auto-labeling.

Badge

A lightweight labeling indicators with optional icon content or counters

Icon

Lucide collection of SVG icons that can be embedded in other components