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 EOS icons.

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 EOS icons 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 EOS icons.

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 EOS icons.

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 EOS icons 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 EOS icons or a btn-primary button class.

Refresh

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.