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".






All these variations can be applied to any button size or style.

Full width buttons stretch to fill the width of their parent element.




JavaScript is required for nested dropdown functionality. The scripts provided are for demonstration and come with no additional support.

// 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();
        }
    });
});






These variaitons are only available in the extra-small button size.

This variation is used solely for the trade button on the portfolios table. The main body of the button triggers an action, but the arrow triggers a dropdown.

This variation is used in table columns that are so narrow they cannot accomodate any extra padding.