moo-component-button

Standard

When utilizing a button on a form or as a call-to-action, use the .Button class to apply standard button attributes. You may also modify the color and look of the button by adding an additional class with a color suffix. .Button--default, .Button--blue, .Button--green, .Button—red, .Button--outline, .Button--link

<!-- Standard button -->
<button type="button" class="Button Button--default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="Button Button--blue">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="Button Button--green">Green</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="Button Button--red">Red</button>
<!-- A button with an outline -->
<button type="button" class="Button Button--outline">Outline</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="Button Button--link">Link</button>

Sizing

The size of a button can be altered by adding an optional class with a size suffix. For default size, no class is applied. .Button--lg, .Button-- sm, .Button--xs

<!-- Large Grey Button -->
<button type="button" class="Button Button--default Button--lg">Default</button>
<!-- Large Blue Button -->
<button type="button" class="Button Button--blue Button--lg">Default</button>

<!-- Default Medium Grey Button -->
<button type="button" class="Button Button--default">Default</button>
<!-- Default Medium Blue Button -->
<button type="button" class="Button Button--blue">Default</button>

<!-- Small Grey Button -->
<button type="button" class="Button Button--default Button--sm">Default</button>
<!-- Small Blue Button -->
<button type="button" class="Button Button--blue Button--sm">Default</button>

<!-- XS Grey Button -->
<button type="button" class="Button Button--default Button--xs">Default</button>
<!-- XS Blue Button -->
<button type="button" class="Button Button--blue Button--xs">Default</button>

Hovers

A button’s hover state background color can be customized by adding an optional class with a hover color suffix. Please note that it is not recommended to adding this class along with the button color modifier class. .Button--hoverBlue, .Button--hoverGreen, .Button--hoverRed, .Button--outlineHoverGreen, .Button--outlineHoverRed

<!-- Hover Blue -->
<button type="button" class="Button Button--hoverBlue">To Blue</button>
<!-- Hover Green -->
<button type="button" class="Button Button--hoverGreen">To Green</button>
<!-- Hover Red -->
<button type="button" class="Button Button--hoverRed">To Red</button>
<!-- Hover Outline Green -->
<button type="button" class="Button Button--outline Button--outlineHoverGreen">To Green</button>
<!-- Hover Outline Red -->
<button type="button" class="Button Button--outline Button--outlineHoverRed">To Red</button>

Disabled

To disable a button, simply add the .is-disabled class.

<!-- Standard button -->
<button type="button" class="Button Button--default is-disabled">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="Button Button--blue is-disabled">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="Button Button--green is-disabled">Green</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="Button Button--red is-disabled">Red</button>
<!-- A button with an outline -->
<button type="button" class="Button Button--outline is-disabled">Outline</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="Button Button--link is-disabled">Link</button>

With Icons

For the button label an icon can substitute the default text by adding the .Button--icon class. A child span element is required with the appropriate icon class (for example: .Icon—[imageX]) to display the image.

<button type="button" class="Button Button--primary Button--icon">
  <span class="Icon--imageX"></span>
</button>

Button Groups

Standard

Multiple buttons may be grouped together within a single element denoted with a .ButtonGroup class. This setup is useful to display buttons that have relative functions. For example: a form may require multiple action buttons near its end, such as [Submit] [Reset] and [Cancel]. The .u-cf class is recommended to add appropriate margins around the .ButtonGroup element.

<div class="ButtonGroup u-cf">
  <button type="button" class="Button Button--default">Default</button>
  <button type="button" class="Button Button--default">Default</button>
  <button type="button" class="Button Button--default">Default</button>
</div>

Joined

Button sets can be visually joined together, creating a tighter relationship between the buttons. This is accomplished by adding the optional .ButtonGroup--joined class to the existing .ButtonGroup element.

<div class="ButtonGroup ButtonGroup--joined u-cf">
  <button type="button" class="Button Button--default">Default</button>
  <button type="button" class="Button Button--default">Default</button>
  <button type="button" class="Button Button--default">Default</button>
</div>
Form