The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Edit preferences
menu
more_horiz
  • More

Buttons

Buttons are elements used to perform actions such as submitting a form, opening a dialog, or cancelling an action. They are an essential element of interaction design and have a primary role in the conversation between a user and the system.

There are a number of options you can use when styling a button, such as size, colour, and disabled state.

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.

Default button

A default button is the standard button with basic style and the most commonly used option.

<button class='btn btn-default'>Button</button>
<button class='btn btn-default disabled'>Button</button>
launchButtons design specifications
content_copylaunch
/* Button */
.btn { 
  border-radius: 2px; 
  font-weight: bold;
  line-height: 18px;
  padding: 8px 16px;
}

.btn:active,
.btn.active {
  box-shadow: none;
}

/* Default button */
.btn-default {
  background-color: transparent;
  border-color: $bc-gray-900;
  color: $bc-gray-900;
}

.btn-default:hover,
.btn-default:active:hover {
  background-color: transparent;
  border-color: $bc-gray-600;
  color: $bc-gray-600;
}

.btn-default:active,
.btn-default.active,
.btn-default:focus,
.btn-default.focus,
.btn-default.active.focus,
.btn-default.active:focus,
.btn-default:active:focus,
.btn-default:active.focus {
  background-color: transparent;
  border-color: $bc-gray-500;
  color: $bc-gray-500;
}

.btn-default.disabled,
.btn-default.disabled:hover,
.btn-default.disabled:focus {
  background-color: transparent;
  border-color: $bc-gray-900;
  color: $bc-gray-900;
  opacity: .60;
}

Inverse

Use the inverse button when you want to place a default button on a dark background.

<button class='btn btn-default-inverse'>Button</button>
<button class='btn btn-default-inverse disabled'>Button</button>
launchButtons design specifications
content_copylaunch
/* Button */
.btn { 
  border-radius: 2px; 
  font-weight: bold;
  line-height: 18px;
  padding: 8px 16px;
}

.btn:active,
.btn.active {
  box-shadow: none;
}

/* Default button inverse */
.btn-default-inverse {
  background-color: transparent;
  border-color: $bc-white;
  color: $bc-white;
}

.btn-default-inverse:hover,
.btn-default-inverse:active:hover {
  border-color: $bc-gray-200;
  color: $bc-gray-200;
}

.btn-default-inverse:active,
.btn-default-inverse.active,
.btn-default-inverse:focus,
.btn-default-inverse.focus,
.btn-default-inverse.active.focus,
.btn-default-inverse.active:focus,
.btn-default-inverse:active:focus,
.btn-default-inverse:active.focus {
  border-color: $bc-gray-400;
  color: $bc-gray-400;
}

.btn-default-inverse.disabled,
.btn-default-inverse.disabled:hover,
.btn-default-inverse.disabled:focus {
  border-color: $bc-white;
  color: $bc-white;
  opacity: .55;
}

Primary button

A primary button is used for primary 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.

<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>
launchButtons design specifications
content_copylaunch
/* Button */
.btn { 
  border-radius: 2px; 
  font-weight: bold;
  line-height: 18px;
  padding: 8px 16px;
}

.btn:active,
.btn.active {
  box-shadow: none;
}

/* Primary button */
.btn-primary {
  background-color: $bc-green-500;
  border-color: $bc-green-500;
  color: $bc-white;
}

.btn-primary:hover,
.btn-primary:active:hover {
  background-color: $bc-green-900;
  border-color: $bc-green-900;
  color: $bc-white;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.btn-primary:active.focus {
  background-color: $bc-green-700;
  border-color: $bc-green-700;
  color: $bc-white;
}

.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus {
  background-color: $bc-green-500;
  border-color: $bc-green-500;
  color: $bc-white;
  opacity: .60;
}

/* Outline primary button */
.btn-outline-primary {
  background-color: transparent;
  border-color: $bc-green-500;
  color: $bc-green-500;
}

.btn-outline-primary:hover,
.btn-outline-primary:active:hover {
  border-color: $bc-green-900;
  color: $bc-green-900;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary.active.focus,
.btn-outline-primary.active:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary:active.focus {
  border-color: $bc-green-700;
  color: $bc-green-700;
}

.btn-outline-primary.disabled,
.btn-outline-primary.disabled:hover,
.btn-outline-primary.disabled:focus {
  border-color: $bc-green-500;
  color: $bc-green-500;
  opacity: .60;
}

Danger button

Use the danger button to indicate destructive or negative actions. For example, deleting data.

<button class='btn btn-danger'>Button</button>
<button class='btn btn-danger disabled'>Button</button>
launchButtons design specifications
content_copylaunch
/* Button */
.btn { 
  border-radius: 2px; 
  font-weight: bold;
  line-height: 18px;
  padding: 8px 16px;
}

.btn:active,
.btn.active {
  box-shadow: none;
}

/* Danger button */
.btn-danger {
  background-color: $bc-red-500;
  border-color: $bc-red-500;
  color: $bc-white;
}

.btn-danger:hover,
.btn-danger:active:hover {
  background-color: $bc-red-900;
  border-color: $bc-red-900;
  color: $bc-white;
}

.btn-danger:active,
.btn-danger.active,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger:active:focus,
.btn-danger:active.focus {
  background-color: $bc-red-700;
  border-color: $bc-red-700;
  color: $bc-white;
}

.btn-danger.disabled,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus {
  background-color: $bc-red-500;
  border-color: $bc-red-500;
  color: $bc-white;
  opacity: .60;
}

How to chose the right button class

  • In a UI with several buttons such as "copy", "paste", "crop", etc, since all those buttons have the same hierarchy, they should be using the btn-default class.
  • If one of the buttons represents a call-to-action (ie "save system") where the intention is that the user saves certain information, the button class should be btn-primary since we want the user to focus on it.
  • In a scenario where a user clicks on a button using the btn-default class which triggers a destructive action (ie "delete"), the user will be required to confirm the deletion:

Deleting this system cannot be reversed and all information will be lost

Delete
Cancel
  • Even though it was the user's choice to use "delete", mistakes can happen and users don't always read the labels in buttons. This is why the btn-danger class in the button helps the user to focus on the destructive action.
EOS uses 3 main button styles btn-default, btn-primary, btn-danger. The use of other Bootstrap button styles such as btn-warning, btn-info and btn-success isn't allowed.

Report an issue or share an idea