Brand Button

<button class="btn btn-brand btn-neutral">neutral</button>
<button class="btn btn-brand btn-primary">primary</button>
<button class="btn btn-brand btn-secondary">secondary</button>
<button class="btn btn-brand btn-accent">accent</button>
<button class="btn btn-brand btn-ghost">ghost</button>
<button class="btn btn-brand btn-link">
  <a href="buttons.html">link</a>
</button>
    

Button with an active state

<button class="btn btn-active-state btn-neutral">neutral</button>
<button class="btn btn-active-state btn-primary">primary</button>
<button class="btn btn-active-state btn-secondary">secondary</button>
<button class="btn btn-active-state btn-accent">accent</button>
<button class="btn btn-active-state btn-ghost">ghost</button>
<button class="btn btn-active-state btn-link">
  <a href="buttons.html">link</a>
</button>
    

Button with an outline

<button class="btn btn-outline btn-neutral">neutral</button>
<button class="btn btn-outline btn-primary">primary</button>
<button class="btn btn-outline btn-secondary">secondary</button>
<button class="btn btn-outline btn-accent">accent</button>
    

Button with a disabled state

  <button class="btn btn-disabled">neutral</button>
  <button class="btn btn-disabled btn-primary">primary</button>
  <button class="btn btn-disabled btn-secondary">secondary</button>
  <button class="btn btn-disabled btn-accent">accent</button>
    

Button with state color

<button class="btn btn-state-colors btn-info">info</button>
<button class="btn btn-state-colors btn-success">success</button>
<button class="btn btn-state-colors btn-warning">warning</button>
<button class="btn btn-state-colors btn-danger">error</button>
    

Button Size

<button class="btn simple-lg">Large</button>
<button class="btn simple-regular">Medium</button>
<button class="btn simple-sm">Small</button>
<button class="btn simple-xs">Tiny</button>
    

Button Size with an outline

<button class="btn btn-simple-outline simple-lg">Large</button>
<button class="btn btn-simple-outline simple-regular">Medium</button>
<button class="btn btn-simple-outline simple-sm">Small</button>
<button class="btn btn-simple-outline simple-xs">Tiny</button>
    

Round Buttons Size

<button class="btn circle circle-lg">
  <span class="material-icons"> close </span>
</button>
<button class="btn circle circle-regular">
  <span class="material-icons"> close </span>
</button>
<button class="btn circle circle-sm">
  <span class="material-icons"> close </span>
</button>
<button class="btn circle circle-xs">
  <span class="material-icons"> close </span>
</button>
    

Button with floating action

<button class="btn circle floating-action circle-lg">
  <span class="material-icons"> close </span>
</button>
<button class="btn circle floating-action circle-regular">
  <span class="material-icons"> close </span>
</button>
<button class="btn circle floating-action circle-sm">
  <span class="material-icons"> close </span>
</button>
<button class="btn circle floating-action circle-xs">
  <span class="material-icons"> close </span>
</button>
    

Round Button with an outline

<button class="btn circle btn-circle-outline circle-lg">
  <span class="material-icons"> close </span>
</button>
<button class="btn circle btn-circle-outline circle-regular">
  <span class="material-icons"> close </span>
</button>
<button class="btn circle btn-circle-outline circle-sm">
  <span class="material-icons"> close </span>
</button>
<button class="btn circle btn-circle-outline circle-xs">
  <span class="material-icons"> close </span>
</button>