Overview

Actions are displayed as buttons. A button can contain an icon or text. Whether you use icons or text depends on how critical or how familiar the action is.

Icons are, by definition, a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to the users, the icon can be confusing and frustrating.

Look and feel

When to Use

1
do
false

Recommended

  • Always use a text button for primary, secondary, semantic, and negative path actions.
  • Use the icon button only for very basic standard icons and familiar actions.
  • No matter if you use the icon button or the text button, always use a text tooltip.
  • Consider using buttons with icons and text for primary actions.
1
dont
false

Not Recommended

  • Avoid using icon-only buttons for primary actions.

Actions and Icons

<div> <div>Action</div> <div>Icon</div> <div>Usage</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FnNw2JHJT5mCEnaQutecbIe">Add</a></div> <div><span class="icon icon-add"></span></div> <div>To include as an existing object, process, or item.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FyjpeMrAgbXQd26Y6DK1P5s%3F_lightbox%3Dtrue">Create</a></div> <div></div> <div>To add as a new object, process, or item.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FfvptUbdhnjKBYl4jXGeALY">Delete</a></div> <div></div> <div>To remove permanently, such as data from a database.</div> </div> <div> <div>Undo</div> <div></div> <div>To cancel or reverse the last one or more commands executed.</div> </div> <div> <div>Redo</div> <div></div> <div>To restore an action that was previously cancelled with the Undo function.</div> </div> <div> <div>OK</div> <div></div> <div>Confirm settings that may or may not have been changed.</div> </div> <div> <div>Close</div> <div></div> <div>Close the dialog or window.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FHSNFWjU9kETQrWIJM3CjEe">Save</a></div> <div></div> <div>Save changes to existing objects.</div> </div> <div> <div>Cancel</div> <div></div> <div>Abort an action without saving any changes.</div> </div> <div> <div>View</div> <div></div> <div>Look at something in detail.</div> </div> <div> <div>Launch</div> <div></div> <div>To start an application or service.</div> </div> <div> <div>Done</div> <div></div> <div>To indicate that something has been recently completed.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FaHqaie8PZjvy59GCJOqyWG">Start</a></div> <div></div> <div>To begin an action.</div> </div> <div> <div>Stop</div> <div></div> <div>To stop an action.</div> </div> <div> <div>Pause</div> <div></div> <div>To temporarily stop an action.</div> </div> <div> <div>Restart</div> <div></div> <div> <p>To start all the applications, the operating system or action again.</p> <p>See the reload and start actions.</p> </div> </div> <div> <div>Export</div> <div></div> <div>To create a copy of data in a different location or format.</div> </div> <div> <div>Import</div> <div></div> <div> <p>To upload information from place external for the system.</p> <p>See the upload action.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FeLKmA1YaMYOrxhHoNXZ3H8">Lock</a></div> <div></div> <div>To restrict or prevent access to an item, especially temporarily.</div> </div> <div> <div>Unlock</div> <div></div> <div>To allow access to an item, especially temporarily.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FOYlkWGh70mecIRqynLXTz7">Show</a></div> <div></div> <div>To make something visible.</div> </div> <div> <div>Hide</div> <div></div> <div>To make part of the screen invisible.</div> </div> <div> <div>Link</div> <div></div> <div>To create a relationship between items.</div> </div> <div> <div>Unlink</div> <div></div> <div>To remove a relationship between items.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2Fg0VWVrKbya1DdjA0Z9xtAT">Copy</a></div> <div></div> <div>To make a duplicate version of.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FiLHSzQtjgEpCR9DgMNAgLJ">Activate</a></div> <div></div> <div>To make active; to switch on.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FMfiRPbYPbS0UUVpcQ4NC5G">Deactivate</a></div> <div></div> <div>To make inactive; to switch off.</div> </div> <div> <div>Reload</div> <div></div> <div>To refresh already available content.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FrFofKjAESkoMAM1oYsV2Ca">Update</a></div> <div></div> <div>To apply the most recent changes.</div> </div> <div> <div>Synchronize</div> <div></div> <div>To compare data in two or more systems and ensure it's identical in all of them. If the data is not identical, this function takes steps to make it identical by using the information from the system that was last updated and copying it into the other systems.</div> </div> <div> <div>Move up</div> <div></div> <div>To place in a higher position.</div> </div> <div> <div>Move down</div> <div></div> <div>To place in a lower position.</div> </div> <div> <div>Overflow</div> <div></div> <div>To show a popover box with navigation options.</div> </div> <div> <div>Verify</div> <div></div> <div>To prove the truth of something (for example to verify your phone number).</div> </div> <div> <div>Feedback</div> <div></div> <div>To ask users for opinion.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FbM5aeErxAplBr2jnde8NhZ">Enable</a></div> <div></div> <div>To turn on, or make something operational.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FeoxPK7k62F9rprajBPy1Yq">Disable</a></div> <div></div> <div>To make inactive; to prevent activation.</div> </div> <div> <div>Finish</div> <div></div> <div>To trigger the completion of workflow or a process.</div> </div> <div> <div>Continue</div> <div></div> <div>To keep doing something without stopping.</div> </div> <div> <div>Subscribe</div> <div></div> <div>To add oneself or another to the subscriber list for an alert or publication.</div> </div> <div> <div>Unsubscribe</div> <div></div> <div>To remove oneself or another from the subscriber list for an alert or publication.</div> </div> <div> <div>Reject</div> <div></div> <div>To refuse permission.</div> </div> <div> <div>Accept</div> <div></div> <div>To accept invitations, contracts.</div> </div> <div> <div>Approve</div> <div></div> <div>To grant permission (for example, for budget or vacation).</div> </div> <div> <div>Schedule</div> <div></div> <div>To set a time at which an action will happen; to enter something into a timetable; to plan for a certain date.</div> </div> <div> <div>Attach</div> <div></div> <div>To attach information to other information.</div> </div> <div> <div>Go To</div> <div></div> <div>Go to external information about the system you are on.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FSdqBjiUKQmW9X2sS9er28l">Download</a></div> <div></div> <div>To transfer (software, data, or files) from a server to a client, especially to create a local instance for personal use.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FaOfKEzoQoIEA7HnqCkYYt4">Upload</a></div> <div></div> <div>To transfer (data) so a resource can use it.</div> </div> <div> <div>Previous</div> <div></div> <div>Preceding chronologically or in order. Is used to indicate all functions on the UI that return the user to the object immediately before the current object. (Example: Previous page; Previous article; Previous document;).</div> </div> <div> <div>Next</div> <div></div> <div>To navigate to the following step.</div> </div> <div> <div>Skip</div> <div></div> <div>To pass over part of a sequence of data or instructions.</div> </div> <div> <div>Discard</div> <div></div> <div>Discard a draft for a new object, or a draft version containing changes to an existing object. Use Discard if the object or item has not yet been actively saved by the user.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FPE4mGmJYotPnpoylUe0MGI">Configure</a></div> <div></div> <div>To set up for operation, especially for a specific purpose; to make major changes to a system.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FfaVEDFUWit7GGVvMcpUhVh">Change</a></div> <div></div> <div>To make a simple modification.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FjK7Vl9B6sGzbEntHVxhEEH">Set</a></div> <div></div> <div>To adjust to a desired value, such as a default setting.</div> </div> <div> <div>Decline</div> <div></div> <div>Refuse an invitation.</div> </div> <div> <div>Back</div> <div></div> <div>To navigate to the previous screen.</div> </div> <div> <div>Erase</div> <div></div> <div>A tool used to remove parts of a layer, drawing or selection.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FBWCf6xedG7HSQy7gOgcxUO">Search</a></div> <div></div> <div>To attempt to find.</div> </div> <div> <div>Filter</div> <div></div> <div>A set of criteria that restricts the records returned as the result of a query. Using filters, you define which subset of data appears in the result set.</div> </div> <div> <div>Sort</div> <div></div> <div>To rearrange the content of a column in a table in ascending or descending order. The rest of the content in the table is arranged accordingly.</div> </div>

Actions with more than one possible icon

<div> <div>Action</div> <div>Icon</div> <div>Usage</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FMBkOZQ0aU2uhtQ5qAKgWEa">Remove</a></div> <div></div> <div>To take out, such as a reference to an item.</div> </div> <div> <div></div> <div></div> <div>Use the second icon only when you use it in combination with the add action and the two actions stand side by side.</div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FOA1WqjRfwrvKz2659yLYNg">Edit</a></div> <div></div> <div>To make one or more significant modifications.</div> </div> <div> <div></div> <div></div> <div>Use the second icon when editing is presented, for example, in a dialog or opens in a new page (use for mass editing or multi-item editing).</div> </div> <div> <div>Refresh</div> <div></div> <div>To overwrite an existing target system with the lastest data from a source system while maintaining the configuration.</div> </div> <div> <div></div> <div></div> <div> <p>Use the second icon when you want to synchronize parts of the content.</p> <p>See reload and synchronize actions.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fjam4.sapjam.com%2Fwiki%2Fshow%2FfBp2QLtZldVI7Qe8NUMwhQ">Contact</a></div> <div></div> <div>To communicate with; To reach out to.</div> </div> <div> <div></div> <div></div> <div>Use the second icon when you want to make an e-mail contact.</div> </div> <div> <div></div> <div></div> <div> <p>Use the third icon when you want to make a contact via video call.</p> <p>If the application supports and the 3 options use all three in combination.</p> </div> </div>

Resources

Action Text

Fiori Design Guideline - Action Placement

UXC Product Standard - Terminology