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.


Close

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.

Delete

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.

Remove

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

  • Use the remove_circle icon from Material Design.

Cancel

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.

Save

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

  • Use the btn-primary button class.

Copy

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.

Edit

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.

Add

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.

Refresh

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

  • Use the sync icon from Material Design.