<!-- Default -->
<a href="#" class="button" title="Button">Button</a>

<!-- Button Secondary -->
<a href="#" class="button--secondary" title="Button Secondary">Button Secondary</a>

<!-- Button Themed -->
<a href="#" class="button--alt" title="Button Themed">Button Themed</a>

<!-- Disabled Button -->
<a href="#" class="button" title="Disabled Button">Disabled Button</a>

<a href="#" class="{{modifier}}" title="{{button-text}}">{{button-text}}</a>
/* Default */
{
  "button-text": "Button",
  "modifier": "button"
}

/* Button Secondary */
{
  "button-text": "Button Secondary",
  "modifier": "button--secondary"
}

/* Button Themed */
{
  "button-text": "Button Themed",
  "modifier": "button--alt"
}

/* Disabled Button */
{
  "button-text": "Disabled Button",
  "modifier": "button"
}

Button Pattern