Buttons

HTML

<button class="fizz-button">Button</button>
<button class="fizz-button-primary">Button</button>
<button class="fizz-button-secondary">Button</button>
<button class="fizz-button-super-primary">Button</button>
<button class="fizz-button-danger">Button</button>

Small Buttons

HTML

<button class="fizz-button fizz-button-small">Button</button>
<button class="fizz-button-primary fizz-button-small">Button</button>
<button class="fizz-button-secondary fizz-button-small">Button</button>
<button class="fizz-button-super-primary fizz-button-small">Button</button>
<button class="fizz-button-danger fizz-button-small">Button</button>

Large Buttons

HTML

<button class="fizz-button fizz-button-large">Button</button>
<button class="fizz-button-primary fizz-button-large">Button</button>
<button class="fizz-button-secondary fizz-button-large">Button</button>
<button class="fizz-button-super-primary fizz-button-large">Button</button>
<button class="fizz-button-danger fizz-button-large">Button</button>

Disabled Buttons

HTML

<button class="fizz-button"
        disabled>Button</button>
<button class="fizz-button-primary"
        disabled>Button</button>
<button class="fizz-button-secondary"
        disabled>Button</button>
<button class="fizz-button-super-primary"
        disabled>Button</button>
<button class="fizz-button-danger"
        disabled>Button</button>

Button w/ Icon

HTML

<button class="fizz-button-primary fizz-button-icon">
  <svg class="fizz-icon-16">
    <use href="#create">
  </svg>
  <span>Button</span>
</button>

<button class="fizz-button-primary fizz-button-icon">
  <span>Button</span>
  <svg class="fizz-icon-16">
    <use href="#create">
  </svg>
</button>

Icon Button

HTML

<button class="fizz-icon-button-small">
  <svg class="fizz-icon-16" role="img" aria-hidden="true" width="24" height="24">
      <use href="#create"></use>
    </svg>
</button>

Inverted Icon Button

HTML

<button class="fizz-icon-button-small fizz-icon-button-inverted">
  <svg class="fizz-icon-16" role="img" aria-hidden="true" width="24" height="24">
      <use href="#create"></use>
    </svg>
</button>

Flip Icon

Apply .fizz-flip-icon to an icon button if you need to toggle the rotation of the icon within 180 degrees.

HTML

<button class="fizz-icon-button-small"
        onclick="flipIcon(event)">
  <svg viewBox="0 0 32 32"
       id="icon-chevron-down"
       class="fizz-icon-16 fizz-text-brand">
    <path d="M24.4 8.4L16 16.6 7.6 8.4 4 11.9l12 11.7 12-11.7z"></path>
  </svg>
</button>

<script>
  function flipIcon(e) {
    var button = e.target.closest('button')
    button.classList.toggle('fizz-flip-icon')
  }
</script>

Spinner Button

Toggle the class .fizz-spinner-button to display an animated spinner while setting the text color of the button to transparent.

HTML

<button class="fizz-button-primary">
  <span>Button</span>
</button>

<button class="fizz-button-primary fizz-button-spinner">
  <span>Button</span>
</button>

Text Button

HTML

<div class="fizz-flex-row">
  <button class="fizz-button-text">Text Button</button>
  <button class="fizz-button-text"
          disabled>Disabled Text Button</button>
</div>

Select Button

In some cases you might want a button that looks like a select element but functions like a button — to trigger a popover, for example.

HTML

<div class="fizz-flex-row">
  <select class="fizz-select">
    <option>Select Element</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <button class="fizz-button-select">Select Button</button>
</div>

Button Group

.fizz-button-group can contain any number of .fizz-button or .fizz-button-small elements.

.fizz-button-group is an inline element, so it's contained in a <div> here to keep each example on its own line.

HTML

<div>
  <span class="fizz-button-group">
    <button class="fizz-button fizz-is-active">Button</button>
    <button class="fizz-button">Button</button>
    <button class="fizz-button">Button</button>
  </span>
</div>

<div>
  <span class="fizz-button-group">
    <button class="fizz-button-small fizz-is-active">Button</button>
    <button class="fizz-button-small">Button</button>
    <button class="fizz-button-small">Button</button>
  </span>
</div>

Here's an example of a multi-line button group.

HTML

<div>
  <span class="fizz-button-group">
    <button class="fizz-button">
      3 Min Case<br>
      <span class="fizz-text-small fizz-text-regular">Up to $34.80 off</span>
    </button>
    <button class="fizz-button fizz-is-active">
      5 Min Case<br>
      <span class="fizz-text-small fizz-text-regular">Up to $42.00 off</span>
    </button>
    <button class="fizz-button">
      10 Min Case<br>
      <span class="fizz-text-small fizz-text-regular">Up to $60.00 off</span>
    </button>
  </span>
</div>