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
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, type, and state.

linkGeneral specs

CSS properties

    margin
    0
    0
    0
    0
    border
    0
    0
    0
    0
    padding
    0
    0
    0
    0
    Button types
    How to use this element

    Example
    Code
    content_copy

    linkButton 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.
    Do not use the btn-link class in a button element. All buttons should be clearly styled as buttons. This helps the user identify the type of response to expect when clicking on a given element. Go to the usage page for more information about bootstrap classes.

    linkButton sizing

    The size of buttons plays a key role in helping users to identify buttons according to their importance.

    Do not use the btn-xs and btn-lg button classes. They have been excluded from the EOS Design System because they do not fullfill our criteria for readability and accessibility.