Buttons and links

Make sure to take into account accessibility and semantics when you choose between an anchor link and a button. Use an anchor link if it's function takes you to another 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 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".

There are two ways to style a button on a dark background. The button component can have the class .dark or the parent element can have the class .dark. Either way is correct; there is no need for both. The outline button on dark uses different clors for link, hover, and active. The primary button's colors remain the same.

The Design Language provides 3 sizes of buttons, large, medium, and small. Large is the default.

A button can be the full width of the parent element.