Button

Selector

button, .button

Buttons are used to perform actions on page. They come in 3 variations, depending on how much attention you want to draw to each action.

If you need to style a link like a button, such as in the case where you want a link to be a primary call to action, you can use the .button class. Don't style any other elements as buttons, always make sure to use the elements intended by HTML to perform actions.

States

It might be hard to see without the transition, but the button is shrunk slightly in the active state. This adheres to the design philosophy of MangoUI, where interactive elements get squished when pressed. The focus state is intended to be round, but a bug in Safari makes the outline from following the radius of the border

For disabled buttons, make sure you provide a way for the user to understand why it was disabled or provide a way for the user to re-enable the button. Disabled buttons on their own don't communicate the issue and expecting the user to know how to resolve the disabled button may be a lot to ask, especially on complex forms.

Variations

Icons can be added to the button by using the desired .icon .icon-* classes.

To make a loading button, use a span[role="alert"] as the button content to communicate the loading message. A good technique is to have it hidden in the button and use JavaScript to dynamically show it. When you do that, make sure to hide the original text using a technique like hidden or display: none. The "alert" role ensures that the change is communicated to assistive technologies.