HTML code inside buttons with simple

36

votes

I'm new to rails, and just found the simple_form gem. I installed it with bootstrap suport, but now I can't get this code to work the way I want it

<%= f.button :submit, "<i class='icon-ok icon-white'></i> Save", class: "btn btn-primary" %>

I just want to put the icon inside the button, but when I do this, it shows me a button with the text '<i class='icon-ok icon-white'></i> Save'

I also tried to do

<%= f.button :submit, class: "btn btn-primary" do %><i class="icon-ok icon-white"></i> Save<% end %>

But with no success. How can I add some HTML inside the button with simple_form gem?

71

votes

Don't use content_tag. The following works:

  <%= button_tag(type: 'submit', class: "btn btn-primary") do %>
    <i class="icon-ok icon-white"></i> Save
  <% end %>

27

votes

In simple_form 3.0rc use :button button type (it passes your block to original ActiveView button helper):

<%= f.button :button do %>
  <i class="icon-save"></i>
  Commit
<% end %>

Or write additional button wrapper.

For additional info look into simple_form/form_builder.rb FormBuilder#button method.

7

votes

I think you can't do it with simple_form. But I have good news for you. You should be fine using rails helper along side with simple form.

just do

button_tag(type: 'submit', class: "btn btn-primary") do
  content_tag(:i, class: "icon-ok icon-white")
  "Save"
end

Not sure if this works, even the syntax but it should give you a hint

1

votes

<%= button_tag(type: 'submit', class: "btn btn-primary") do %> Save <% end %>

0

votes

You can do this with the following code:

= f.button :button, 'Send', data: { disable_with: "<i class='fi-heart'></i> Sending..." }

Note that you want to use f.button instead of f.submit Also note that :button needs to be the first param to f.button

HTML code inside buttons with simple_form