Picchu

Action trigger

Guidance

Action triggers are specific pairings of icon and text designed to help set appropriate user expectations about resulting functionality. They are reserved for instances where an action or event is triggered, such as downloading, playing a video, or adding an appointment to your calendar, etc. The icons act as an added affordance to alert the user to functionality beyond simple navigation. The action trigger component should not be used for simple navigational functions; in those instances follow the hyperlink guidance instead.

  • Action triggers consist of a single icon, followed by the corresponding action text. Use only official Microsoft icons that are aligned to the latest style.
  • Sizing of action triggers is determined by the body copy sizing on your page. Typically at desktop where the body copy is 18px, your action trigger icon should be 32px, followed by an 8px gap, followed by your 18px corresponding text. If your body copy is 15px, your action triger icon should be 24px, followed by an 8px gap, followed by your 15px corresponding text.
  • The entire grouping of icon and text as well as padding should be clickable. On hover of the clickable area, pointer should convert to a hand, and the text portion should underline.
  • Action triggers should trigger the functionality they represent. For instance, if the action is to "Play video" make sure the video starts playing on click. In other words, the user should not have to click another play icon in order to initiate the video.

Demo

See the Pen ActionTrigger demo 1 by Microsoft.com (@microsoft) on CodePen.