Solid Rectangular Buttons

<div class="btn__basic">
  <button class="btn btn-color--primary btn-font--primary">primary</button>
  <button class="btn btn-color--secondary btn-font--primary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--primary">
    tertiary
  </button>
  <button class="btn btn-color--primary btn-font--secondary">
    primary
  </button>
  <button class="btn btn-color--secondary btn-font--secondary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--secondary">
    tertiary
  </button>
</div>

Solid Rounded Buttons

<div class="btn__border--radius">
  <button class="btn btn-color--primary btn-font--primary">primary</button>
  <button class="btn btn-color--secondary btn-font--primary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--primary">
    tertiary
  </button>
  <button class="btn btn-color--primary btn-font--secondary">
    primary
  </button>
  <button class="btn btn-color--secondary btn-font--secondary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--secondary">
    tertiary
  </button>
</div>

Solid Button Bullets

<div class="btn__bullets">
  <button class="btn btn-color--primary btn-font--primary">primary</button>
  <button class="btn btn-color--secondary btn-font--primary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--primary">
    tertiary
  </button>
  <button class="btn btn-color--primary btn-font--secondary">
    primary
  </button>
  <button class="btn btn-color--secondary btn-font--secondary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--secondary">
    tertiary
  </button>
</div>

Outline Rectangular Buttons

<div class="btn__outline">
  <button class="btn btn-color--primary btn-font--primary">primary</button>
  <button class="btn btn-color--secondary btn-font--primary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--primary">
    tertiary
  </button>
  <button class="btn btn-color--primary btn-font--secondary">
    primary
  </button>
  <button class="btn btn-color--secondary btn-font--secondary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--secondary">
    tertiary
  </button>
</div>

Outline Rounded Buttons

<div class="btn__border--radius btn__outline">
  <button class="btn btn-color--primary btn-font--primary">primary</button>
  <button class="btn btn-color--secondary btn-font--primary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--primary">
    tertiary
  </button>
  <button class="btn btn-color--primary btn-font--secondary">
    primary
  </button>
  <button class="btn btn-color--secondary btn-font--secondary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--secondary">
    tertiary
  </button>
</div>

Outline Button Bullets

<div class="btn__bullets btn__outline">
  <button class="btn btn-color--primary btn-font--primary">primary</button>
  <button class="btn btn-color--secondary btn-font--primary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--primary">
    tertiary
  </button>
  <button class="btn btn-color--primary btn-font--secondary">
    primary
  </button>
  <button class="btn btn-color--secondary btn-font--secondary">
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--secondary">
    tertiary
  </button>
</div>

Buttons Disabled

<div class=" btn--disabled btn__border--radius">
  <button class="btn btn-color--primary btn-font--primary" disabled>
    primary
  </button>
  <button class="btn btn-color--secondary btn-font--primary" disabled>
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--primary" disabled>
    tertiary
  </button>
  <button class="btn btn-color--primary btn-font--secondary" disabled>
    primary
  </button>
  <button class="btn btn-color--secondary btn-font--secondary" disabled>
    secondary
  </button>
  <button class="btn btn-color--tertiary btn-font--secondary" disabled>
    tertiary
  </button>
</div>

Link Buttons

<div class="btn--link">
  <button class="btn btn-font--primary">link</button>
  <button class="btn btn-font--secondary">link</button>
  <button class="btn btn-font--primary" disabled>link</button>
  <button class="btn btn-font--secondary" disabled>link</button>
</div>

Buttons in diffrent Sizes

<div class="btn__border--radius btn--size">
  <button class="btn btn-color--primary btn-font--primary btn--small">
    small
  </button>
  <button class="btn btn-color--secondary btn-font--primary btn--regular">
    regular
  </button>
  <button class="btn btn-color--tertiary btn-font--primary btn--large">
    large
  </button>
  <button class="btn btn-color--primary btn-font--primary btn--small" disabled>
    small
  </button>
  <button class="btn btn-color--secondary btn-font--primary btn--regular" disabled>
    regular
  </button>
  <button class="btn btn-color--tertiary btn-font--primary btn--large" disabled>
    large
  </button>
</div>

Rectangular Buttons with Icons

<div class="btn__icon">
  <button class="btn btn-color--primary btn--small">
    <span class="material-icons">close</span>
  </button>
  <button class="btn btn-color--secondary btn--regular">
    <span class="material-icons">close</span>
  </button>
  <button class="btn btn-color--tertiary btn--large">
    <span class="material-icons">close</span>
  </button>
  <button class="btn btn-color--primary btn--small" disabled>
    <span class="material-icons">close</span>
  </button>
  <button class="btn btn-color--secondary btn--regular" disabled>
    <span class="material-icons">close</span>
  </button>
  <button class="btn btn-color--tertiary btn--large" disabled>
    <span class="material-icons">close</span>
  </button>
</div>

Circle Buttons With Icons

<div class="btn__icon--round">
      <button class="btn  btn--small">
        <span class="material-icons">search</span>
      </button>
  <button class="btn  btn--regular">
    <span class="material-icons">search</span>
  </button>
  <button class="btn  btn--large">
    <span class="material-icons">search</span>
  </button>
  <button class="btn  btn--small" disabled>
    <span class="material-icons">search</span>
  </button>
  <button class="btn  btn--regular" disabled>
    <span class="material-icons">search</span>
  </button>
  <button class="btn  btn--large" disabled>
    <span class="material-icons">search</span>
  </button>
</div>

Floating Buttons

<div class="floating__btn">
  <button class="btn btn-color--primary btn--small">
    <span class="material-icons">add</span>
  </button>
  <button class="btn btn-color--secondary btn--regular">
    <span class="material-icons">add</span>
  </button>
  <button class="btn btn-color--tertiary btn--large">
    <span class="material-icons">add</span>
  </button>
  <button class="btn btn-color--primary btn--small" disabled>
    <span class="material-icons">add</span>
  </button>
  <button class="btn btn-color--secondary btn--regular" disabled>
    <span class="material-icons">add</span>
  </button>
  <button class="btn btn-color--tertiary btn--large" disabled>
    <span class="material-icons">add</span>
  </button>
</div>