Buttons and links
beta

Make sure to take into account accessibility and semantics when you choose between an anchor link and a button. Use an anchor link if its function takes you to another page or another location on the same page. Clicking a button should trigger an action, like submitting a form or editing your profile. A button link using classes btn btn-link, like all buttons, is responsive and becomes larger on the mobile breakpoint. In other words, if you want your button link in a line of text use only btn-link. In the button links example below, only the button link with icon behaves like a responsive button.
Note: You can resize the width of your browser to see the example below in action.

This is the anchor link in a line of text.
This is the anchor link in a line of text.
This is the in a line of text.

This is the  in a line of text.


This should be the primary action on the page. Use this for the most important thing you want the user to do.



Use this if you have more than one kind of primary action that appears together. This variation is for the less important action of the two. Eg. "cancel" or "don’t save".



The Design Language provides four sizes of buttons — large, medium, small, and extra-small. Large is the default. Extra-small is for use within a table cell.





A button can be the full width of the parent element. Although you could have an extra small block button, it will appear the same as a small button since the difference between them is the left and right padding.




The Design Language provides several button variations, all are available in large (default), medium, or small sized buttons, except the button-link dropdown which is text only.

  • Dropdown button:
    • — as a button-link
    • — as a primary button, or a primary-outline button
  • Button with icon & split dropdown button:
    • — as a primary button, or a primary-outline button


// Add event to show sublists responsively
Array.prototype.forEach.call(document.querySelectorAll(".dropdown-sublist-container > a"), function(subList) {
    return subList.addEventListener("focus", function() {
        var subList = event.target.parentNode;
        subList.classList.add("show-sub");
    });
});

// Add events to hide sublists responsively
// navigate off of sublist
Array.prototype.forEach.call(document.querySelectorAll(".dropdown-sublist a"), function(subListItem) {
    return subListItem.addEventListener("blur", function() {
        var subList = event.target.parentNode.parentNode.parentNode;
        setTimeout(function() {
            if (!subList.contains(document.activeElement)) {
                subList.classList.remove("show-sub");
            }
        }, 0);
    });
});

// navigate from sublist container (ie, going up)
Array.prototype.forEach.call(document.querySelectorAll(".dropdown-sublist-container > a"), function(subList) {
    return subList.addEventListener("blur", function() {
        var subList = event.target.parentNode;
        setTimeout(function() {
            if (!subList.contains(document.activeElement)) {
                subList.classList.remove("show-sub");
            }
        }, 0);
    });
});

// Add event to make skiplinks work
Array.prototype.forEach.call(document.querySelectorAll(".dropdown-sublist-container .skip-sublist a"), function(skipLink) {
    return skipLink.addEventListener("click", function(e) {
        e.stopPropagation();
        skipLink.parentNode.parentNode.parentNode.nextElementSibling.firstElementChild.focus();
    });
});

// Allow people to navigate up through menu with up key
Array.prototype.forEach.call(document.querySelectorAll(".dropdown-sublist-container + li > a"), function(listElement) {
    return listElement.addEventListener("keydown", function(e) {
        if (e.key === 'ArrowUp') {
            listElement.parentNode.previousElementSibling.firstElementChild.focus();
        }
    });
});