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

Common actions

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


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 Material Design.


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 Material Design and the btn-danger button class for the confirmation message.


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

  • Use the remove_circle icon from Material Design.


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.


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

  • Use the btn-primary button class.


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 Material Design.


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 Material Design or a btn-default button class.


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

  • Use the add icon from Material Design or a btn-primary button class.


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 Material Design.