A Simpler ButtonComponent: Just Render a Div

A couple of weeks ago I wrote about trying to build a universal ButtonComponent — one with no custom CSS classes. The result worked but was complicated. The night I wrote it up, a simpler approach just came to me.

The trick: a ButtonComponent that just renders a div with the correct styles applied. No magic methods, no parameter fudging, just a div that looks like a button. The caller is responsible for what it does — it already knows whether it needs an anchor, a form submit, or something else entirely. The component just makes it look right.

Usage

Since the component just renders a regular div, you can use it with any Rails helper that accepts a block or plain old HTML.

<%= link_to calendar_path do %>
  <%= render ButtonComponent.new(icon: :calendar, label: t("navigation.calendar")) %>
<% end %>

<%= content_tag(:button, type: :submit) do %>
  <%= render ButtonComponent.new(icon: :check, label: t("actions.save")) %>
<% end %>

<%= form.button(type: :submit) do %>
  <%= render ButtonComponent.new(icon: :check, label: t("actions.submit")) %>
<% end %>

<button>
  <%= render ButtonComponent.new(icon: :check) %>
</button>

Anything that wraps HTML works. The component doesn't care.

The Component

The component renders the icon and label with the correct colours. It's dead simple.

class ButtonComponent < ViewComponent::Component
  BASE_CLASSES = "cursor-pointer block font-bold ..."

  COLOURS = {
    grape: "bg-grape-600 hover:bg-grape-700 text-white",
    cherry: "bg-cherry-600 hover:bg-cherry-700 text-white"
  }.freeze

  def initialize(icon: nil, label: nil, colour: :grape)
    ...
  end

  def classes
    class_list(BASE_CLASSES, COLOURS.fetch(colour))
  end
end

<%= content_tag(:div, class: classes) do %>
  <% if icon %>
    <%= render IconComponent.new(icon) %>
  <% end %>

  <% if label %>
    <%= content_tag(:span, label) %>
  <% end %>
<% end %>

That's it! Well...plus a few more parameters if you want to control the CSS classes for the icon and the label from the caller.

The component manages how it looks. How it behaves is up to the caller, just as it should be.

Drawbacks

This trades flexibility for consistency and enforcement. The universal button component could enforce aria labels or data attributes much more strictly. This version doesn't afford that, but in return anything can be made to look like a button — not just the element types the component pre-defines. It brings back the flexibility of the CSS approach, with a bit more structural consistency and less duplication when buttons have internal structure like icons with labels.

Where I'm At

I still think just using custom CSS classes for buttons (i.e. button-grape) is the way to go for most projects, especially if your buttons are structurally simple. But this is a workable alternative if your buttons have a little going on internally and you want that to stay consistent. Responsibilities are where they ought to be and it scales to every new usage automatically — no need to keep faffing with magic method definitions. A much more attractive proposition.

Originally posted on tonyrowan.tech