DAHLIA Pattern Library

Button Round 

<button class="button round-icon " href="javascript:void(0)">
  <span class="ui-icon">
    <svg>
      <use xlink:href="#i-like"></use>
      <use xlink:href="#i-like-fill" style="display:none"></use>
    </svg>
  </span>
  <span class="sr-only">Button</span>
</button>
 
<button class="button round-icon {{default classes ''}}" href="javascript:void(0)">
  <span class="ui-icon">
    <svg>
      <use xlink:href="#i-{{default icon 'like'}}"></use>
      <use xlink:href="#i-{{default icon 'like-fill'}}" style="display:none"></use>
    </svg>
  </span>
  <span class="{{default label 'sr-only'}}">{{default text 'Button'}}</span>
</button>
 
{
  "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.