DAHLIA Pattern Library

Button Icon 

<button class="button has-icon--right tiny " href="javascript:void(0)">
  <span class="ui-icon ui-small">
    <svg>
      <use xlink:href="#i-arrow-down"></use>
    </svg>
  </span>
  Button
</button>
<button class="button has-icon--right tiny " href="javascript:void(0)">
  <span class="ui-icon ui-small">
    <svg>
      <use xlink:href="#i-download"></use>
    </svg>
  </span>
  Button
</button>
<button class="button has-icon--right tiny " href="javascript:void(0)">
  <span class="ui-icon ui-small">
    <svg>
      <use xlink:href="#i-forward"></use>
    </svg>
  </span>
  Button
</button>
<button class="button has-icon--right tiny " href="javascript:void(0)">
  <span class="ui-icon ui-small">
    <svg>
      <use xlink:href="#i-info"></use>
    </svg>
  </span>
  Button
</button>
<button class="button has-icon--right tiny " href="javascript:void(0)">
  <span class="ui-icon ui-small">
    <svg>
      <use xlink:href="#i-like"></use>
    </svg>
  </span>
  Button
</button>
 
{{#each icons}}
<button class="button has-icon--right tiny {{default classes ''}}" href="javascript:void(0)">
  <span class="ui-icon ui-{{default scale 'small'}}">
    <svg>
      <use xlink:href="#i-{{this}}"></use>
    </svg>
  </span>
  {{default text 'Button'}}
</button>
{{/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"
  ]
}

There are no notes for this item.