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 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 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 3 sizes of buttons — large, medium, and small. Large is the default.

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

The Design Language provides several button variations: dropdowns — as a button-link, as a primary or primary-outline button, also a split-button dropdown. Another variation is a button with an icon. All variations can be used with large (default), medium, or small sized buttons and all are responsive.