Restyle the buttons according to a defined hierarchy.

Changes will include:

• Create styles for several button variants: primary, secondary (default), danger, link and large.
• Support SVG icons within buttons.
• Clean up some techinical debt: stop using YUI button CSS, consolidate button CSS used in core.

CSS API

Buttons, hyperlinks and submit inputs can be styled as buttons. The CSS API for these is a bit different:

Buttons

For compatibility reasons, the button API stays the same. Buttons are not styled by default and need to be wrapped within a span tag with a .yui-button class.

<span class="yui-button primary">
    <button>primary button</button>
</span>

<span class="yui-button link-button">
    <button>transparent link button</button>
</span>

<span class="yui-button yui-menu-button">
    <button>dropdown button</button>
</span>

Hyperlinks

Hyperlinks can be styled as buttons just by adding the `.yui-button` class to them. Examples:

<a href="#" class="yui-button">hyperlink button</a>
<a href="#" class="yui-button danger disabled">hyperlink button</a>

Submit inputs

Inputs with the type attribute equal to submit, button or reset have button styles applied by default. Examples:

<input type="submit" value="input button">
<input type="reset" disabled value="input button">
<input type="button" class="primary large-button" value="input button">

Icon buttons

Icon buttons have a .icon-button CSS class and have the link button style. Example:

<a class="yui-button icon-button"><i class="fa fa-user" /></a>

Variants:

Button types:

• Primary: add the .primary class to the .yui-button element or input.
• Secondary: default state.
• Danger: add the .danger class to the .yui-button element or input.
• Link button: transparent button. Add the .link-button class to the .yui-button element or input.

Modifiers:

• Large: add the .large-button class to the .yui-button element or input.
• Disabled: add the disabled attribute to the <button> or <input>, or the .disabled class to the <a> element.