Example

The example below shows utility actions for Print, Email and RSS.

Available Actions

In Figma, use the toggle feature to select different utility actions.

When to use

• Content on a webpage or a document is something a user would want to be able to refer back to - provide options to print, email, or download.
• If you would like to give the user the option to:
  • Open an XML feed in a different tab
  • Copy a link to a webpage
  • Open a popup with new updates or new website capabilities

Usage

• Utility actions are ghost buttons for available actions that do not take priority over primary or secondary call-to-actions (CTAs).
• Placement should be in the page header and top, right aligned.
• Include no more than 3 utility actions on a page to prevent cluttering the user interface (UI) and distracting the user.
• When pairing 2 or more utility action buttons, the preferred action goes on the left.
• Be consistent with the inclusion of utility actions and their order across pages and products.
• Follow any additional governance established by your UX and content lead for which utility actions to include.

When to consider alternatives

• If an action (e.g. printing or emailing) is a critical call-to-action on a webpage, consider using a solid or outlined main button.
• If the utility action is opening a link in a new webpage versus triggering an action, refer to guidance on links.
• Carefully consider which utility actions are used on mobile (since space is a premium.)

Accessibility

• Always include both the icon and label in utility actions to meet accessibility standards.
• Don't create CTAs that duplicate utility actions on a page. Having multiple "print" actions on a page can hinder accessibility for screen reader users.