Button styles for UI in Rails

Buttons

The buttons component provides a set of pre-styled buttons for your Rails app.

Installation

Copy

rails g instrumental:buttons

To insert a component into a view:

Copy

rails g instrumental:buttons:insert

Useage

To make any link a button, simply add the btn class to the link or button element, along with the class for the type of button you want to display. Here's a simple "primary" button:

Copy

<%= link_to "Click me!", "#", class: "btn btn-primary" %>

Buttons have flex layouts built-in, which makes it easy to display a button with a icon to the left or right of the button text, like this:

Copy

<%= link_to "#", class: "btn btn-primary" do %>
  <%= icon("rocket") %>
  <span>Let's go!</span>
<% end %>

Button styles

As of this writing, here's a list of all of the available button styles and their corresponding Tailwind CSS classes.

Preview

Code

Primary

Secondary

Large Primary

Large Secondary

Small Primary

Small Secondary

Ghost

Ghost Small

Copy

<% grid_cell_classes = "text-center flex flex-col items-center justify-center" %>
<div class="grid grid-cols-1 gap-10
            sm:grid-cols-2">

  <div class="<%= grid_cell_classes %>">

    <!-- Primary -->
    <span class="btn btn-primary">
      <%= icon("rocket") %>
      <span>
        Primary
      </span>
    </span>

  </div>

  <div class="<%= grid_cell_classes %>">

    <!-- Secondary -->
    <span class="btn btn-secondary">
      <%= icon("rocket") %>
      <span>
        Secondary
      </span>
    </span>

  </div>

  <div class="<%= grid_cell_classes %>">

    <!-- Large Primary -->
    <span class="btn btn-primary btn-large">
      <%= icon("rocket") %>
      <span>
        Large Primary
      </span>
    </span>

  </div>

  <div class="<%= grid_cell_classes %>">

    <!-- Large Secondary -->
    <span class="btn btn-secondary btn-large">
      <span>
        Large Secondary
      </span>
      <%= icon("arrow-right") %>
    </span>

  </div>

  <div class="<%= grid_cell_classes %>">

    <!-- Small Primary -->
    <span class="btn btn-primary btn-small">
      <%= icon("rocket", size: 16) %>
      <span>
        Small Primary
      </span>
    </span>

  </div>

  <div class="<%= grid_cell_classes %>">

    <!-- Small Secondary -->
    <span class="btn btn-secondary btn-small">
      <%= icon("check", size: 16) %>
      <span>
        Small Secondary
      </span>
    </span>

  </div>

  <div class="<%= grid_cell_classes %>">

    <!-- Ghost -->
    <span class="btn btn-ghost">
      <span>
        Ghost
      </span>
    </span>

  </div>

  <div class="<%= grid_cell_classes %>">

    <!-- Ghost Small -->
    <span class="btn btn-ghost btn-small">
      <span>
        Ghost Small
      </span>
    </span>

  </div>
</div>

Primary

Uses your app's primary color with a subtle gradient. Ideal for primary actions.

btn btn-primary

Copy

Secondary

Gray background. Ideal for secondary actions.

btn btn-secondary

Copy

Ghost

Looks like regular text until hovered, then it appears as a button with gray background.

btn btn-ghost

Copy

Large Button

Makes any button's padding and font size slightly larger.

btn btn-primary btn-large

Copy

Small Button

Makes any button's padding and font size slightly smaller.

btn btn-primary btn-small

Copy

You can inspect (or customize) your button styles in this file:
app/assets/tailwind/buttons.css

Customizing buttons

You can add additional Tailwind CSS classes to any button element or link to override or customize the button's appearance (without needing to create are add new button styles in the app/assets/tailwind/buttons.css file).

Here's an example of making a button that spans the full width of its container:

Copy

<%= link_to "Click me!", "#", class: "btn btn-primary w-full" %>

I created Instrumental Components to make designing and building professional apps with Ruby on Rails easy, fast, and fun. I use it on all of my projects and I hope it helps you build something great.

Brian Casel

Creator of Instrumental Components

Learn more Send me a question or request