@moodxd/component-button v1.0.3

MoO 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, .Button--teal, .Button--white, .Button--outline, .Button--link

<!-- Standard button -->
<button type="button" class="Button">Default</button>
<!-- Provides extra visual weight and identifies the secondary action in a set of buttons -->
<button type="button" class="Button Button--teal">Teal</button>
<!-- A button with an outline -->
<button type="button" class="Button Button--outline">Outline</button>
<!-- Used in cases of a colored background behind button -->
<button type="button" class="Button Button--white">White</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="Button Button--link">Link</button>

Disabled

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

<!-- Standard button -->
<button type="button" class="Button is-disabled">Default</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="Button Button--teal is-disabled">Teal</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 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">Default</button>
  <button type="button" class="Button">Default</button>
  <button type="button" class="Button">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">Default</button>
  <button type="button" class="Button">Default</button>
  <button type="button" class="Button">Default</button>
</div>