Pure ViewComponent (BEM) Approach

The button is a plain <button> element styled via shared CSS classes. In a Rails app this is rendered by Neem::BEMButtonComponent (Ruby ViewComponent). No Shadow DOM — the global token stylesheet drives everything.

Primary Button

Maps to Kotlin PrimaryButton. Full-width, 64px height via token.

Secondary Button

Maps to Kotlin SecondaryButton. 2px outlined border from token.

With Icons

Leading and trailing icons placed inside .neem-button__content.

Disabled State

Kotlin: enabled = false → neem-button--disabled class.

Usage — HTML (plain)

Just add the CSS classes. No JavaScript required for rendering.

<!-- 1. Link stylesheets once -->
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="button.css" />

<!-- 2. Render buttons with BEM classes -->
<button class="neem-button neem-button--primary">
  <span class="neem-button__content">
    <span class="neem-button__icon">...svg...</span>
    <span class="neem-button__label">Confirm Payment</span>
  </span>
  <!-- DottedLoadingIndicator -->
  <div class="neem-button__dots" aria-hidden="true">
    <div class="neem-button__dot"></div>
    <div class="neem-button__dot"></div>
    <div class="neem-button__dot"></div>
  </div>
</button>

<!-- Loading state: add class -->
<button class="neem-button neem-button--primary neem-button--loading">...</button>

<!-- Disabled -->
<button class="neem-button neem-button--secondary" disabled>...</button>