Icon button item

Icon button item is used to emphasise the action or as a secondary isolated action on the item.

Example of Icon Button items
Usage

If the action is separate from the main list item, the button can be partially interactive. For example when it's being used:

  • to copy or edit information

  • to link to more detailed additional information

  • as a visual aid for a supporting action to the information presented.

Use:

  • when the user needs to copy information or find out more info on the list item
  • when more prominence is needed on the list items action

Don't use:

  • when the icon itself isn’t explicit on what the associated action is
  • when more context is needed to highlight the associated action, use a button instead

List item with tooltip
List item with edit
List item with add
a list item with info icon
a list item with an umbrella icon
Availability

Platform

Availability

Figma

Android

iOS

Web