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>