Buttons

Overview

Buttons are available in the colors primary, secondary, error, and muted, as well as white. For the themed colors there is both a filled and outlined version. There is also a flat variant for the filled buttons. These classes can be applied to <button> elements, input elements of types button, submit, and reset, as well as links.

Filled Buttons

Solid colored buttons can be styled with the fc-{color} class. Defaults are only supplied with primary, secondary, muted, error, and white colors to maintain accessible contrast.

Primary Secondary Muted Error White

<button class="fc-primary">Primary</button>
<button class="fc-secondary">Secondary</button>
<button class="fc-muted">Muted</button>
<button class="fc-error">Error</button>
<button class="fc-white">White</button>

Flat Buttons

All filled buttons can have the fc-btn-flat class applied to remove their box-shadow.

Primary Secondary Muted Error White

<button class="fc-primary fc-btn-flat">Primary</button>
<button class="fc-secondary fc-btn-flat">Secondary</button>
<button class="fc-muted fc-btn-flat">Muted</button>
<button class="fc-error fc-btn-flat">Error</button>
<button class="fc-white fc-btn-flat">White</button>

Outlined Buttons

The primary, secondary, muted, and error buttons have alternative outlined versions. These can be used by adding the fc-btn-outline class.

Primary Secondary Muted Error

<button class="fc-primary fc-btn-outline">Primary</button>
<button class="fc-secondary fc-btn-outline">Secondary</button>
<button class="fc-muted fc-btn-outline">Muted</button>
<button class="fc-error fc-btn-outline">Error</button>