WAI Website Assets

Button: Icon 

<button class="button button-icon"><span><svg aria-hidden="true" class="icon-search "><use xlink:href="../../assets/images/icons.svg#icon-search"></use></svg> search</span></button>
 
{%- if type == "fake" -%}
<span class="button{% for mod in mods %} button-{{ mod }}{% endfor %}">{{label}}</span>
{%- else -%}
{%- if type != "icon" -%}
{%- if type == "link" -%}
<a class="button{% for mod in mods %} button-{{ mod }}{% endfor %}" href="{{ href }}"><span>{% if icon %}{%render '@icons', name=icon %} {% endif %}{{ label }}</span></a>
{%- else -%}
<button class="button{% for mod in mods %} button-{{ mod }}{% endfor %}"{{ " type=\"submit\"" if submit }}{{ " disabled" if disabled }}><span>{% if icon %}{%render '@icons', name=icon %} {% endif %}{{ label }}</span></button>
{%- endif -%}
{%- else -%}
<button class="button{% for mod in mods %} button-{{ mod }}{% endfor %}"{{ " type=\"submit\"" if submit }}{{ " disabled" if disabled }}><span>{%render '@icons', name=icon %}</span></button>
{%- endif -%}
{%- endif -%}
 
{
  "type": "icon",
  "icon": "search",
  "label": "Icon Button",
  "href": "#",
  "mods": [
    "icon"
  ]
}

There are no notes for this item.