Technically, it’s a violation of UI principles, to have a link that does something to the server’s state. Anthony at uxmovement thinks so, but I disagree with him, because the way the link is next to the button, it’s obvious that it complements the button.
It also emphasizes that one is the primary action, and the other, a secondary one. Furthermore, the second one is the safer action, that may prevent or reverse the primary action. Nielsen hinted at this many years ago… though I can’t imagine them supporting the fact this second button looks like linked text.
DotNetNuke also uses this pattern, and has a style guide explaining this UI.
Their implementation – it’s not so good, because it uses links styled to look like buttons. HTML5 has a BUTTON element that is a better choice. Buttons are in the tab order (so you can control it). It also won’t attract the attention of spiders. You style a button to look like a link; here’s the css for the example above:
.input button.lowcontrast {
font-family: Helvetica Neue, Helvetica, sans-serif;
font-size: 90%;
font-weight: 300;
cursor:pointer;
background-color: transparent;
color: #f26739;
text-decoration: underline;
}
To use it, add a class="lowcontrast" to the button element. Also, when you create the button, make sure it has a type="button" attribute, so it won’t submit the form. Normally, buttons act like “submit” buttons. The secondary button shouldn’t do that – the main button should do that.
(If you’re an old hand at Javascript, you probably know about event.stopPropagation() to prevent the form submission. It turns out that’s not a good practice. It also doesn’t work with AngularJS, so type=”button” is the only choice.)
If you don’t like this look, perhaps you could change the CSS so the second button looks more like a button.
| Attachment | Size |
|---|---|
| lowcontrast.png | 4.18 KB |