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
info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
EOS Design System logotype
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

Depending on the scenario, use any of the following Bootstrap button classes: btn-secondary, 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-secondary 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-secondary, 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-secondary because it only moves the user to the next step of a system process in a larger component.