Primary 

<!-- Default -->
<a href="#" class="button-p1 button-p1--default  " role="button">Primary</a>

<!-- Disabled -->
<a href="#" class="button-p1 button-p1--default  disabled" role="button">Primary</a>

<!-- With Icon -->
<a href="#" class="button-p1 button-p1--with-icon  " role="button">Primary</a>

<!-- Disabled With Icon -->
<a href="#" class="button-p1 button-p1--with-icon  disabled" role="button">Primary</a>

<!-- Icon Only -->

<!-- Icon Only Inactive -->

{{#if url}}
    {{#if text}}
        <a href="{{url}}" class="button-p1 {{#if modifier}}button-p1--{{modifier}}{{/if}} {{#if cssClasses}}{{cssClasses}}{{/if}} {{#if disabled}}disabled{{/if}}" role="button" {{#if target}}target="{{target}}"{{#ifEquals target "_blank"}} rel="noopener"{{/ifEquals}}{{/if}}>{{{text}}}</a>
    {{/if}}
{{/if}}
 
/* Default */
{
  "modifier": "default",
  "url": "#",
  "text": "Primary"
}

/* Disabled */
{
  "modifier": "default",
  "url": "#",
  "text": "Primary",
  "disabled": true
}

/* With Icon */
{
  "modifier": "with-icon",
  "url": "#",
  "text": "Primary"
}

/* Disabled With Icon */
{
  "modifier": "with-icon",
  "url": "#",
  "text": "Primary",
  "disabled": true
}

/* Icon Only */
{
  "modifier": "icon-only",
  "url": "#",
  "text": ""
}

/* Icon Only Inactive */
{
  "modifier": "icon-only",
  "url": "#",
  "text": "",
  "disabled": true
}

There are no notes for this item.