Buttons
Priority
Buttons are categorized by importance and can be applied to a variety of html nodes. Each variation has intention and should be used sparingly.
<button class="button margin-bottom--lv3">Default</button>
<button class="button p0 margin-bottom--lv3">Important</button>
<button class="button p1 margin-bottom--lv3">Primary Action</button>
<button class="button p2 margin-bottom--lv3">Caution</button>
You can create buttons using the button
HTML tag accompanied by the button
class.
To style an anchor (a)
tag as a button use the button
class.
To style an input
as a button use the button
class and define a label by adding a value
attribute.
Disabled
x
<button class="button margin-bottom--lv3" disabled>Default</button>
<button class="button p0 margin-bottom--lv3" disabled>Important</button>
<button class="button p1 margin-bottom--lv3" disabled>Primary Action</button>
<button class="button p2 margin-bottom--lv3" disabled>Caution</button>
In most situations we recommend using the semantic disabled
attribute for appropriate HTML elements. If needed there is a companion disabled
utility class.
Loading
These buttons are used when we have a time-intensive action on the page. We use them to provide feedback to the user and let them know the action is in progress.
x
<button class="button button-loading margin-bottom--lv3" disabled>Default</button>
<button class="button p0 button-loading margin-bottom--lv3" disabled>Important</button>
<button class="button p1 button-loading margin-bottom--lv3" disabled>Primary Action</button>
<button class="button p2 button-loading margin-bottom--lv3" disabled>Caution</button>
Dynamically add the button-loading
class to the button after the first press. After the request is completed, remove the class.
It's advisable to toggle the disabled
attribute as well.
Pagination
x
<div class="button-group regular">
<a href="javascript:;" class="button disabled" aria-label="Back" role="button"> <span class="freddicon menu-left"></span> </a>
<a href="javascript:;" class="button" role="button"> <span class="freddicon menu-right on-right" aria-label="Next"></span> </a>
</div>
There are situations when buttons are grouped for a related function. For example, in paging controls for previous-next buttons.
Wrap two or more buttons using the button-group
class.
Adding the regular
class to style like the example. A dark
style is also available.
If the button has no accessible name or uses an icon, include an aria-label
attribute.
Group
This component is most easily implemented by programmatically instantiating mojo/widgets/ButtonGroup
and passing a template string.
Be mindful of accessibility and tap sizes. Use semantic markup and keep in mind this pattern works best with 3 to 5 items.