Controls

Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.

Use an icon whenever possible to aid the user's recognition and recall. If text is to be included, it must be within a span with class title-label.

Markup

<a class="s-button icon-pencil"></a>
<a class="s-button">Edit</a>
<a class="s-button icon-pencil">
    <span class="title-label">Edit</span>
</a>

Examples

Edit Edit

Notes about button sets

Markup

<span class="l-btn-set">
    <a class="s-button icon-magnify"></a>
    <a class="s-button icon-magnify-in"></a>
    <a class="s-button icon-magnify-out"></a>
</span>

Example