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

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

Common actions

Common action are ones that users perform regularly. These should always be used in the same way to maintain consistent behavior.


linkClose

Closes a modal, message, notification, or cancel/dismiss an action. It is usually placed on the upper right side of the element.

  • Use the close icon from EOS icons.
Common action close example

linkDelete

The delete action should be used for hard-delete, permanent, destructive actions and should always be followed by a confirmation.

  • Use the delete icon from EOS icons and the btn-danger button class for the confirmation message.
Common action delete with button example
Common action delete with icon example

linkRemove

The action of removing an item is non-disruptive and it does not require user confirmation.

  • Use the remove_circle icon from EOS icons.
Common action remove with icon example

linkCancel

Stops the current action. When cancelling an operation in progress may lead to negative consequences, a confirmation message should be used.

  • Use the btn-default button class.
Common action cancel with default button example

linkSave

Stores changes made to the system. Also used for storing data and files to a filesystem.

  • Use the btn-primary button class.
Common action save with primary button example

linkCopy

Creates a copy of the selected item. In addition to an icon, a tooltip should be displayed that confirms “Copied”. Always add an option to copy code examples or user/product information that will need to be pasted elsewhere.

  • Use the content_copy icon from EOS icons.
Common action copy with icon example

linkEdit

Modifies data, information and values. When used in modular components or tables, the edit action should always be used with a tooltip.

  • Use the edit icon from EOS icons or a btn-default button class.
Common action edit with icon example
Common action edit with button example

linkAdd

Changes an existing system, list, or table by adding a new object to it.

  • Use the add icon from EOS icons or a btn-primary button class.
Common action add with icon example
Common action add with button example

linkRefresh

Updates or synchronizes data, information, or content. It can be used with a spin class to animate the icon while data is being retrieved.

  • Use the sync icon from EOS icons.
Common action refresh with icon example