Pill

Filters and selections.

Default

<button type="button" class="<%= pill_class(active: false) %>">Pill</button>
<button type="button" class="<%= pill_class(active: true) %>">Pill</button>

Example 2

<button type="button" class="<%= pill_class(ghost: true) %>">Pill</button>

Example 3

<button type="button" class="<%= pill_class(size: :sm) %>">Pill</button>
<button type="button" class="<%= pill_class(size: :base) %>">Pill</button>
<button type="button" class="<%= pill_class(size: :lg) %>">Pill</button>
<button type="button" class="<%= pill_class(size: :nav) %>">Pill</button>

Disabled

<button type="button" class="<%= pill_class %>" aria-pressed="false" disabled>Unavailable</button>

Toggle buttons

<div data-controller="demo">
<div class="<%= pill_row_class %>" role="group" aria-label="Categories">
  <% { "Design" => true, "Product" => false, "Research" => false }.each do |label, pressed| %>
    <button type="button" class="<%= pill_class %>" aria-pressed="<%= pressed %>" data-action="demo#press"><%= label %></button>
  <% end %>
</div>
</div>

Interaction controller

app/javascript/controllers/demo_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["toast", "toasts"]

  press({ currentTarget }) {
    currentTarget.setAttribute(
      "aria-pressed",
      String(currentTarget.getAttribute("aria-pressed") !== "true"),
    )
  }

  select({ currentTarget }) {
    for (const tab of currentTarget.closest("[role=tablist]").querySelectorAll("[role=tab]")) {
      tab.setAttribute("aria-selected", String(tab === currentTarget))
    }
  }

  choose({ currentTarget }) {
    for (const button of currentTarget.closest("[role=group]").querySelectorAll("button")) {
      button.setAttribute("aria-pressed", String(button === currentTarget))
    }
  }

  toast() {
    this.toastsTarget.append(this.toastTarget.content.cloneNode(true))
  }
}

Navigation

<nav class="<%= pill_row_class %>" aria-label="Periods">
  <a class="<%= pill_class(size: :sm) %>" href="#main" aria-current="page">Month</a>
  <a class="<%= pill_class(size: :sm) %>" href="#main" aria-current="false">Year</a>
  <label class="<%= pill_class(size: :sm) %>"><input type="checkbox" class="sr-only" checked>Checked</label>
</nav>

API reference

pill_class

pill_class(active: false, ghost: false, size: :base, extra: nil)

Parameter	Default	Values
active	false	true · false
ghost	false	true · false
size	:base	:sm · :base · :lg · :nav
extra	nil	Additional Tailwind classes

pill_row_class

pill_row_class(extra: nil)

Parameter	Default	Values
extra	nil	Additional Tailwind classes