Button

Semantic Colors

<%= rui_button("Primary", color: :primary) %>
<%= rui_button("Success", color: :success) %>
<%= rui_button("Danger", color: :danger) %>

Leading Icons (Default)

Icons appear before the text by default:

<%= rui_button("Save", color: :success) do |button| %>
  <% button.with_icon(name: :save) %>
<% end %>

Trailing Icons

Icons appear after the text when using position: :trailing:

<%= rui_button("Continue", color: :primary) do |button| %>
  <% button.with_icon(name: :"arrow-right", position: :trailing) %>
<% end %>

Basic Example: Save vs Publish

Click either button - they go to the same form action, but send different values.

<%= form_with model: @post do |f| %>
  <%= f.text_field :title %>

  <%= f.rui_button("Save Draft",
                   name: :commit,
                   value: "draft",
                   variant: :outline) %>

  <%= f.rui_button("Publish",
                   name: :commit,
                   value: "publish",
                   color: :success) %>
<% end %>

def create
  @post = Post.new(post_params)

  case params[:commit]
  when "publish"
    @post.published = true
    @post.published_at = Time.current
  when "draft"
    @post.published = false
  end

  if @post.save
    redirect_to @post
  else
    render :new
  end
end

Skip Validation (formnovalidate)

Perfect for "Save Draft" buttons - allows saving without meeting validation requirements. No JavaScript needed - native HTML5 feature!

<%= form_with model: @post do |f| %>
  <%= f.text_field :title, required: true %>
  <%= f.text_field :author, required: true %>

  <%= f.rui_button("Save Draft",
                   formnovalidate: true,
                   variant: :outline) %>

  <%= f.rui_button("Publish", color: :success) %>
<% end %>

Override Form Action (formaction)

Submit to different endpoints from the same form. Great for Preview, Export PDF, Send Email, etc.

<%= form_with model: @post do |f| %>
  <%= f.text_field :title %>

  <%= f.rui_button("Save") %>

  <%= f.rui_button("Preview",
                   formaction: preview_post_path(@post),
                   variant: :outline) %>

  <%= f.rui_button("Send Test Email",
                   formaction: email_preview_post_path(@post),
                   variant: :ghost) %>
<% end %>

Open in New Tab (formtarget)

Perfect for PDFs, print views, external processors - keeps your form page open.

<%= form_with model: @post do |f| %>
  <%= f.rui_button("Generate PDF",
                   formaction: pdf_post_path(@post),
                   formtarget: "_blank") %>

  <%= f.rui_button("Print Preview",
                   formaction: print_post_path(@post),
                   formtarget: "_blank",
                   variant: :outline) %>
<% end %>

External Form Association (form_id)

HTML5 lets you place buttons anywhere on the page - perfect for sticky headers, floating actions, split layouts.

<div class="sticky top-0 bg-white p-4">
  <%= rui_button("Save Changes",
                 form_id: "post-form",
                 color: :success) %>
</div>

<%= form_with model: @post, id: "post-form" do |f| %>
  <%= f.text_field :title %>
  <%= f.text_area :content, rows: 20 %>
<% end %>