Button vs. link
The HTML elements for buttons and links describe a very specific type of action that is going to be taken when they are used. However, it is important to know when to use one or the other in a specific situation:
- Use links for navigating to other pages.
- Use buttons for performing an action, such as: “submit,” “merge,” “create new,” “upload,” etc. These actions almost always occur on the same page.
info
Bootstrap btn-link class
Do not use the btn-link class styled like a button.
All links should be clearly styled as links. This helps the user identify the
type of response to expect when clicking a giving elements. Go to the
usage page for more information.Secondary button
A secondary button is the standard button with basic style and the most commonly used option.
content_copy
<button class='btn btn-secondary'>Button</button>
<button class='btn btn-secondary disabled'>Button</button>Inverse
Use the inverse button when you placing a secondary button on a dark background.
content_copy
<button class='btn btn-secondary-inverse'>Button</button>
<button class='btn btn-secondary-inverse disabled'>Button</button>Primary button
A primary button is used for call-to-actions that are clearly more important and need attention drawn to it.
The outlined version is the alternative to solid primary buttons. Use these buttons when actions are primary but don’t want to give extra visual weight.
content_copy
<button class='btn btn-primary'>Button</button>
<button class='btn btn-outline-primary'>Button</button>
<button class='btn btn-primary disabled'>Button</button>
<button class='btn btn-outline-primary disabled'>Button</button>Danger button
Use the danger button to indicate destructive or negative actions. For example, deleting data.
content_copy
<button class='btn btn-danger'>Button</button>
<button class='btn btn-danger disabled'>Button</button>