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 should be the primary action on the page. Use this for the most important thing you want the user to do.
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.