Creating a button with a bootstrap icon that can be disabled

1.9k Views Asked by At

I've come across this this one a few times now. I have buttons in my application that have a bootstrap icons as part of the button label. Normally, I create these using a link:

<%= link_to '<i class="icon-remove icon-large">'.html_safe, department_path(department.id), class: "btn btn-small", method: :delete %>

However, if I need a disabled button, I cannot use a link_to as a link cannot be disabled

I also can't use a button as a button label cannot contain html (i.e. it's not possible to have as the button label)

How can I create a button with a bootstrap icon which can be disabled - preferably without javascript

1

There are 1 best solutions below

0
On BEST ANSWER

I've found then answer is to use a link_to_if block as follows:

<%= link_to_if(department.deletable?, '<i class="icon-remove icon-large"></i>'.html_safe, department_path(department.id), class: 'btn btn-small', disabled: !department.deletable?, method: :delete) {
  '<span class="btn btn-small btn-delete disabled"><i class="icon-remove icon-large"></i>'.html_safe
} %>    

Block content is only shown if department.deletable? is false