WAI Website Assets

Button 

<!-- Default -->
<button class="button"><span>Button</span></button>


<!-- Disabled -->
<button class="button" disabled><span>Disabled button</span></button>


<!-- Secondary -->
<button class="button button-secondary"><span>Secondary button</span></button>


<!-- Small -->
<button class="button button-small"><span>Small</span></button>


<!-- Small Secondary -->
<button class="button button-small button-secondary"><span>Small Secondary</span></button>


<!-- Link -->
<a class="button button-more" href="#"><span>Link Button</span></a>


<!-- Link Secondary -->
<a class="button button-more button-secondary" href="#"><span>Secondary Link Button</span></a>


<!-- 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>


<!-- Fake -->
<span class="button button-fake">Fake button</span>


<!-- Backtotop -->
<a class="button button-backtotop" href="#top"><span><svg aria-hidden="true" class="icon-arrow-up "><use xlink:href="../../assets/images/icons.svg#icon-arrow-up"></use></svg> arrow-up Back to Top</span></a>


<!-- Menu -->
<button class="button button-menu"><span><svg aria-hidden="true" class="icon-menu "><use xlink:href="../../assets/images/icons.svg#icon-menu"></use></svg> menu</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 -%}
 
/* Default */
{
  "label": "Button"
}


/* Disabled */
{
  "label": "Disabled button",
  "disabled": true
}


/* Secondary */
{
  "label": "Secondary button",
  "mods": [
    "secondary"
  ]
}


/* Small */
{
  "label": "Small",
  "mods": [
    "small"
  ]
}


/* Small Secondary */
{
  "label": "Small Secondary",
  "mods": [
    "small",
    "secondary"
  ]
}


/* Link */
{
  "label": "Link Button",
  "href": "#",
  "mods": [
    "more"
  ],
  "type": "link"
}


/* Link Secondary */
{
  "label": "Secondary Link Button",
  "href": "#",
  "mods": [
    "more",
    "secondary"
  ],
  "type": "link"
}


/* Icon */
{
  "type": "icon",
  "icon": "search",
  "label": "Icon Button",
  "href": "#",
  "mods": [
    "icon"
  ]
}


/* Fake */
{
  "type": "fake",
  "label": "Fake button",
  "mods": [
    "fake"
  ]
}


/* Backtotop */
{
  "type": "link",
  "label": "Back to Top",
  "icon": "arrow-up",
  "href": "#top",
  "mods": [
    "backtotop"
  ]
}


/* Menu */
{
  "type": "icon",
  "label": "Menu",
  "icon": "menu",
  "mods": [
    "menu"
  ]
}

There are no notes for this item.