DAHLIA Pattern Library

Button Guidelines 

<h2 class="gamma t-sans">.normal</h2>

<button class="normal" type="button">button.normal</button>
<a class="button normal" href="javascript:void(0)" role="button">a.normal</a>
<br>

<h2 class="gamma t-sans">.primary</h2>

<button class="primary" type="button">button.primary</button>
<a class="button primary" href="javascript:void(0)" role="button">a.primary</a>
<br>

<h2 class="gamma t-sans">.secondary</h2>

<button class="secondary" type="button">button.secondary</button>
<a class="button secondary" href="javascript:void(0)" role="button">a.secondary</a>
<br>

<h2 class="gamma t-sans">.tertiary</h2>

<button class="tertiary" type="button">button.tertiary</button>
<a class="button tertiary" href="javascript:void(0)" role="button">a.tertiary</a>
<br>

<h2 class="gamma t-sans">.alert</h2>

<button class="alert" type="button">button.alert</button>
<a class="button alert" href="javascript:void(0)" role="button">a.alert</a>
<br>

<h2 class="gamma t-sans">.alert-fill</h2>

<button class="alert-fill" type="button">button.alert-fill</button>
<a class="button alert-fill" href="javascript:void(0)" role="button">a.alert-fill</a>
<br>

<h2 class="gamma t-sans">.tint</h2>

<button class="tint" type="button">button.tint</button>
<a class="button tint" href="javascript:void(0)" role="button">a.tint</a>
<br>

<h2 class="gamma t-sans">.deep</h2>

<button class="deep" type="button">button.deep</button>
<a class="button deep" href="javascript:void(0)" role="button">a.deep</a>
<br>

<h2 class="gamma t-sans">.tiny is-leased</h2>

<button class="tiny is-leased" type="button">button.tiny is-leased</button>
<a class="button tiny is-leased" href="javascript:void(0)" role="button">a.tiny is-leased</a>
<br>

<h2 class="gamma t-sans">.tiny is-waitlisted</h2>

<button class="tiny is-waitlisted" type="button">button.tiny is-waitlisted</button>
<a class="button tiny is-waitlisted" href="javascript:void(0)" role="button">a.tiny is-waitlisted</a>
<br>

<h2 class="gamma t-sans">.tiny is-processing</h2>

<button class="tiny is-processing" type="button">button.tiny is-processing</button>
<a class="button tiny is-processing" href="javascript:void(0)" role="button">a.tiny is-processing</a>
<br>

<h2 class="gamma t-sans">.tiny is-approved</h2>

<button class="tiny is-approved" type="button">button.tiny is-approved</button>
<a class="button tiny is-approved" href="javascript:void(0)" role="button">a.tiny is-approved</a>
<br>

<h2 class="gamma t-sans">.tiny is-withdrawn</h2>

<button class="tiny is-withdrawn" type="button">button.tiny is-withdrawn</button>
<a class="button tiny is-withdrawn" href="javascript:void(0)" role="button">a.tiny is-withdrawn</a>
<br>

<h2 class="gamma t-sans">.tiny is-disqualified</h2>

<button class="tiny is-disqualified" type="button">button.tiny is-disqualified</button>
<a class="button tiny is-disqualified" href="javascript:void(0)" role="button">a.tiny is-disqualified</a>
<br>

<h2 class="gamma t-sans">.tiny is-appealed</h2>

<button class="tiny is-appealed" type="button">button.tiny is-appealed</button>
<a class="button tiny is-appealed" href="javascript:void(0)" role="button">a.tiny is-appealed</a>
<br>

<h2 class="gamma t-sans">.ghost-white</h2>

<button class="ghost-white" type="button">button.ghost-white</button>
<a class="button ghost-white" href="javascript:void(0)" role="button">a.ghost-white</a>
<br>

<h2 class="gamma t-sans">.large</h2>

<button class="large" type="button">button.large</button>
<a class="button large" href="javascript:void(0)" role="button">a.large</a>
<br>

<h2 class="gamma t-sans">.tall</h2>

<button class="tall" type="button">button.tall</button>
<a class="button tall" href="javascript:void(0)" role="button">a.tall</a>
<br>

<h2 class="gamma t-sans">.small</h2>

<button class="small" type="button">button.small</button>
<a class="button small" href="javascript:void(0)" role="button">a.small</a>
<br>

<h2 class="gamma t-sans">.tiny</h2>

<button class="tiny" type="button">button.tiny</button>
<a class="button tiny" href="javascript:void(0)" role="button">a.tiny</a>
<br>

<h2 class="gamma t-sans">.expand</h2>

<button class="expand" type="button">button.expand</button>
<a class="button expand" href="javascript:void(0)" role="button">a.expand</a>
<br>

<h2 class="gamma t-sans">.disabled</h2>

<button class="disabled" type="button">button.disabled</button>
<a class="button disabled" href="javascript:void(0)" role="button">a.disabled</a>
<br>

<h2 class="gamma t-sans">.button-link</h2>

<button class="button-link" type="button">button.button-link</button>
<a class="button button-link" href="javascript:void(0)" role="button">a.button-link</a>
<br>
 
{{#each modifiers}}
<h2 class="gamma t-sans">.{{this}}</h2>

  <button class="{{ this }}" type="button">button.{{ this }}</button>
  <a class="button {{ this }}" href="javascript:void(0)" role="button">a.{{ this }}</a>
<br>

  {{#each this}}
  <h4 class="delta t-sans">.{{@../key}}.{{this}}</h4>

      <button class="{{@../key}} {{this}} type="button"">button.{{@../key}}.{{this}}</button>
      <a class="button {{@../key}} {{this}}" href="javascript:void(0)" role="button">a.{{@../key}}.{{this}}</a>
    <br>
  {{/each}}
{{/each}}
 
{
  "modifiers": [
    "normal",
    "primary",
    "secondary",
    "tertiary",
    "alert",
    "alert-fill",
    "tint",
    "deep",
    "tiny is-leased",
    "tiny is-waitlisted",
    "tiny is-processing",
    "tiny is-approved",
    "tiny is-withdrawn",
    "tiny is-disqualified",
    "tiny is-appealed",
    "ghost-white",
    "large",
    "tall",
    "small",
    "tiny",
    "expand",
    "disabled",
    "button-link"
  ],
  "icons": [
    "arrow-down",
    "download",
    "forward",
    "info",
    "like"
  ]
}

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another. Both can be styled to look button-like.