Buttons

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 xlink:href="#icon-edit"></svg>
<span>Button</span>
</button>

<button class="fizz-button-primary fizz-button-icon">
<span>Button</span>
<svg class="fizz-icon-16"><use xlink:href="#icon-edit"></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 xlink:href="#icon-edit"></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 xlink:href="#icon-edit"></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>