Topcoat

CSS for clean and fast web apps

Button

Examples

Show code snippets

HTML

<button class="topcoat-button">Button</button>
<button class="topcoat-button" disabled>Button</button>

Quiet Button

Show code snippets

HTML

<button class="topcoat-button--quiet">Button</button>
<button class="topcoat-button--quiet" disabled>Button</button>

Large Button

Show code snippets

HTML

<button class="topcoat-button--large" >Button</button>
<button class="topcoat-button--large" disabled>Button</button>

Large Quiet Button

Show code snippets

HTML

<button class="topcoat-button--large--quiet" >Button</button>
<button class="topcoat-button--large--quiet" disabled>Button</button>

Call To Action Button

Show code snippets

HTML

<button class="topcoat-button--cta" >Button</button>
<button class="topcoat-button--cta" disabled>Button</button>

Large Call To Action Button

Show code snippets

HTML

<button class="topcoat-button--large--cta" >Button</button>
<button class="topcoat-button--large--cta" disabled>Button</button>

Button Bar

Examples

Show code snippets

HTML

<div class="topcoat-button-bar">
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">One</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">Two</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">Three</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">Four</button>
  </div>
</div>

Large Button Bar

Show code snippets

HTML

<div class="topcoat-button-bar">
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button--large">One</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button--large">Two</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button--large">Three</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button--large">Four</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button--large">Five</button>
  </div>
</div>

Select Button Bar

Examples

Show code snippets

HTML

<div class="topcoat-button-bar">
  <label class="topcoat-button-bar__item">
    <input type="radio" name="topcoat" checked>
    <div class="topcoat-button">One</div>
  </label>
  <label class="topcoat-button-bar__item">
    <input type="radio" name="topcoat">
    <div class="topcoat-button">Two</div>
  </label>
  <label class="topcoat-button-bar__item">
    <input type="radio" name="topcoat">
    <div class="topcoat-button">Three</div>
  </label>
  <label class="topcoat-button-bar__item">
    <input type="radio" name="topcoat">
    <div class="topcoat-button">Four</div>
  </label>
</div>