Buttons form an integral part of any functional website (plus designers love them!) User actions on the web, generally, begin and end with clicking a button. In Google Mail for example, we create a new email by clicking on the Compose button. We will likely also click a few more buttons along the way to customize the email. And lastly, we click the Send button to send out the email. In this part of our Learning Material Design Lite (MDL) series, we’ll look into theButtons component.
The Buttons component in MDL is essentially a visual enhancement of the <button>, or an <a> element to comply with the Material Design aesthetic. In accordance with the specification, there are four types of button
- flat
- raised
- float
- icon
We’ll look into how to implement each of these and when which button works best.
As a reminder, ensure that you have the MDL stylesheets and the JavaScript set out within your document’s head. You can customize the color scheme that will be applied to the components using the MDL Theme builder.
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"><link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'><link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /><script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
Once they are all set, we can deploy theButtons component—starting with the flat type.
The Flat Button
Creating an MDL button is fairly straightforward. We can create a button either with a button element, an input element with submit type, or an anchor tag.
<button>Submit</button><!-- or --><input type="text" type="submit" title="Submit"><!-- or --><a href="#">Submit</a>
Add the mdl-button class to these elements to apply the MDL button styles.
<button class="mdl-button">Submit</button>
In the demo below, we have created a flat button with the default color set to black.
The button text color is customizable by including one of the following modifier classes.
mdl-button--coloredAdd this class to apply the primary color to the button text.mdl-button--accentAlternately, add this class to apply the accent color.
Referring to the main stylesheet name (material.teal-red.min.css), our primary color is “teal”, whereas “red” will be applied as the accent or the secondary color (enter text in the email input below to see those colors take effect).
The flat button is the most basic button type in MDL. It will work best in a situation where an action is intuitively expected, such as in a popup dialog, in a Card component, or in a Login or Sign-up form.
Due to its appearance, however, using a flat button within body text is not recommended. The flat button appears like a regular text, as you can see above. And since it does not explicitly present common button characteristics at first glance, the flat button would not convey the affordance that most users will recognize as being a clickable button.
When the flat button does not feel appropriate, consider using a raised button type.
The Raised Button
The raised button portrays typical characteristics of a button; it is square with a drop shadow to give the raised effect. To create one, we start with a button element with the mdl-button class attached.
<button class="mdl-button">Submit</button>
Then add the mdl-button--raised class to the element. Ass before, the raised button can also be customized with the addition of the mdl-button--colored or mdl-button--accent class.
<button class="mdl-button mdl-button--raised">Submit</button><button class="mdl-button mdl-button--raised mdl-button--colored">Submit</button><button class="mdl-button mdl-button--raised mdl-button--accent">Submit</button>
Here we have raised buttons with the default, primary, and the accent color set as the button background.
The raised button is prominent, which makes it appropriate when users’ attention is top priority. It could be applied, for example, to a call-to-action button in the hero section, a submit button in a subscribe form, or a “Buy Now” button in a product page.
Note: keep in mind the hierarchy when applying a raised button. Using a raised button in a content layer with drop shadows, like a popup dialog, can make the content overly busy with elements fighting for attention.
Floating Action Button (FAB)
The Floating Action Button (FAB) has been acknowledged as the signature element of Material Design. The FAB is a circular button with an icon floating on a page. The purpose of an FAB is akin to the a call-to-action button; it emphasizes an action that users would—presumably—perform the most. It’s usually present with a vivid color that makes it more prominent among the rest of the UI elements on that page.
Once again, we start a Floating Action Button with an empty button element with the mdl-button class. This time, instead of text, we include an include an icon within the button. Refer to the Material Design icon guideline to pick the icon name to display.
<button class="mdl-button"<i class="material-icons">mode_edit</i>></button>
To turn the button into an FAB, we add the mdl-button--fab class, additionally with the mdl-button--colored to modify the background color.
<button class="mdl-button mdl-button--fab mdl-button--colored">Submit</button>
As you can see below, the FAB button takes the accent color when set to a colored button, as opposed to the primary color, as we saw with the flat and raised buttons.
MDL applies the primary color throughout most of the “colored” components, such as the navigation, tabs, text fields, sliders, and checkboxes, which makes it utterly dominant. The FAB should be more prominent among the rest of the UI, thus it takes on the accent color by default.
In any case when the primary color turns out to be more apt, you can add the mdl-button--primary class instead.
<button class="mdl-button mdl-button--fab mdl-button--primary">Submit</button>
Here it is with the primary color:
Icon Button
Unlike FAB, the icon does not take the form of a circle; it appears simply as an icon. An icon button comes in handy where space is limited, or it is sufficient to represent the button purpose as users are accustomed to the application. Take the Google Docs toolbar as an example:
Using a textual button for a toolbar in this case would be unimaginable.
The icon button is formed through the mdl-button and mdl-button--icon class combination:
<button class="mdl-button mdl-button--icon"><i class="material-icons">backup</i></button>
This example displays an icon that depicts upload or backup functionality:
The Button Ripple Effect
Furthermore, these buttons can be enhanced with the ripple effect. The ripple effect is another one of Material Design’s visual signatures and provides visual feedback when the button has been clicked. The effect starts at the coordinate when the click is made, replicating how the effect works in real life.
This enhancement comes through two classes: mdl-js-button and mdl-js-ripple-effect which can be applied to any MDL button types.
Add these two classes to the button:
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">Save</button>
and the ripple effect should now be applied:
Inactive Buttons
In some cases, such as when a required text field is still empty, or a particular option is yet to be selected, the actionable button might be better off disabled. To disable MDL buttons, add the HTML boolean attribute disabled to the button element:
<button class="mdl-button" disabled>Send</button>
The button should now be unresponsive to user interaction (the ripple effect will also be disabled). Adding the color modifier classes mdl-button--colored or mdl-button--accent, will also have no affect on disabled buttons.
The disabled attribute, though not valid HTML, is also applicable to buttons created with an anchor tag.
Wrapping Up
Buttons are pretty simple to implement. We can build a nicely styled button, with a smooth ripple effect animation, with only a couple of classes. Personally, I hope the component will be further improved by taking inspiration from the Bootstrap Button component, by perhaps including the Button Groups variant.
In the next instalment of this series, we are going to look at the Text Fields component, which we have already encountered a few times so far.
Until next time!
