Topcoat

CSS for clean and fast web apps

Icon Button

Show code snippets

HTML

<button class="topcoat-icon-button">
  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button" disabled>
  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>

Quiet Icon Button

Show code snippets

HTML

<button class="topcoat-icon-button--quiet">
  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--quiet" disabled>
  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>

Large Icon Button

Show code snippets

HTML

<button class="topcoat-icon-button--large">
  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--large" disabled>
  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>

Large Quiet Icon Button

Show code snippets

HTML

<button class="topcoat-icon-button--large--quiet">
  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>
<button class="topcoat-icon-button--large--quiet" disabled>
  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
</button>