How to Add Disabled State to Buttons with Turbo & Tailwind CSS


This post was originally published on Rails Designer.

If you’ve used Rails’ UJS, which is now defunct, you probably used the data-disable-with="" attribute in the past. It worked like this:

<%= form_for @post do |f| %>
  <⁠%= f.submit "Save", data: { disable_with: "Saving…" } %>
<% end %>

When the form was submitted, the submit button would be disabled and shown “Saving…” instead of “Save”. Nifty! No JavaScript required!

But the world has moved on and is now using Hotwire. Initially, when Hotwire was announced in December 2020, there was no alternative for data-disable-with. But forward to November 2021, button’s submitted “through” Turbo now (prior to turbo:submit-start) get the disabled attribute and it is removed prior to firing turbo:submit-end.

Sidenote: this PR added the option to mimic the previous UJS behaviour. I’d like a bit more control, so I prefer the method outlined here.

That is all you need to show some fancy-pants submit buttons. The PR above shows how you can do it with vanilla CSS. Like so:

button .show-when-disabled { display: none; }
button[disabled] .show-when-disabled { display: initial; }

button .show-when-enabled { display: initial; }
button[disabled] .show-when-enabled { display: none; }

Which works great, but my preferred tool is Tailwind CSS, so I can create a component just for a button and have everything contained in one file.

Let’s look how this can be done with Tailwind CSS’ utility classes instead. Let’s use the same HTML from above:

   class="block group-disabled/button:hidden">Submit
   class="hidden group-disabled/button:block">Submitting…

With some extra styles attached the button looks like this when enabled:

Image description

And like this with the disabled attribute added:

Image description

It works using the group/button (always name your Tailwind CSS’ groups!). Then it’s just using the disabled modifier-utility.

You can have a play with it in this Tailwind Play (try adding the disabled attribute to the button).

You are of course not limited to plain text in the disabled-state, you can add icons, change the style and add transitions.

Check Rails Designer’s ButtonComponent for inspiration. ✌️

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

A product management framework for building successful wearable products

Next Post

Precision Trends in Metrology, Part 1

Related Posts