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

Usage

Choosing the right button is fundamental to deliver a consistent user experience across an entire product portfolio.

Choosing the right button class

warning
Bootstrap button classes you should and shouldn't use
Depending on the scenario, use any of the following Bootstrap button classes: btn-default, btn-primary, btn-danger. The use of other Bootstrap button classes such as btn-link, btn-warning, btn-info, and btn-success isn't allowed.
  • Use the class btn-default for actions with the same hierarchy, such as “copy”, “paste”, “crop”, etc.
  • Use the class btn-primary to represent a call-to-action, for example "save", "send", etc., in order to draw the user's attraction to this action.
  • Destructive actions such as "delete", "erase", "unsubscribe", etc., should use the class btn-default, however, they require a confirmation message with the ultimate destructive action. This last step requires full attention from the user, therefore you must use the class btn-danger.
check_circleDo

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

Cancel
Delete

Buttons are not links

The use of the Bootstrap class btn-link is not permitted since it blends two different concepts: buttons and links.

Links

Links should only be used to take the user to a different page or section, within or outside of the application. There should be no system action performed by clicking a link.

Buttons

A button is used to perform any action on a given page, module, or component. An action such as next in a wizard should also use a btn-default because it only moves the user to the next step of a system process in a larger component.