Skip to main content

Action trigger

An action trigger component performs an operation that is positioned inline on the page. Use it for taking an action or for interacting with something like a file or media resource. Examples include “Save,” “Edit,” or “Play.” Using an action trigger keeps the user within the current context rather than forcing him/her to navigate to a different page. Thus, you should use an action trigger as part of an interactive in-page experience.


An action trigger with an edit glyph on the default theme

Best practices

The action trigger is built using a host element such as a button or an anchor. It also can be used in a group of elements, which is illustrated in the All Glyphs example below.

Typically, action trigger components are used inside interactive tables or related to other interactive content. This means that the trigger should be co-located with the positioning of the material it will be acting upon.

There is no provision for displaying alternate labels to indicate a change of state. Use the action toggle if you need this capability.


  • Use an action trigger to take an action in the middle of a workflow. For example, to play an album before buying it.
  • Use a glyph and/or text label so the user can visually identify the action trigger.
  • Position the action trigger so that it is physically associated with the item it will be acting upon.
  • When using a glyph label only, add a tool tip to the action trigger so that there is a secondary means for identifying the function of the action trigger.


  • Do not use an action trigger to navigate to another page or experience. Use a hyperlink or call to action instead.
  • Do not obscure or hide an action trigger so that it is difficult for the user to identify.


Call to action


  • Use aria-label for Glyph only implementations or if an expanded description is helpful for those using screen readers.

  • Use class="x-screen-reader" on the span tag only for the glyph tool tip option.

  • href="#" is used here for example purposes only; # should be replaced with a valid page URL.


  • Classes: Required. Apply the class c-action-trigger to the host element to make it an action trigger.

  • Text/glyph: There are three labeling options available: text and glyph, text only, or glyph only.

    • Text: To use text, just add a string as normal for the host element.

    • Glyph: To use a glyph, add the c-glyph class and the class name of the glyph to the button element.

    • Predefined Glyphs: The following glyph classes are predefined:

      • glyph-edit
      • glyph-cancel
      • glyph-global-nav-button
      • glyph-shopping-cart
      • glyph-chevron-left
      • glyph-chevron-right
      • glyph-chevron-up
      • glyph-chevron-down
      • glyph-play
      • glyph-info
      • glyph-download
      • glyph-cancel
  • Align margin: Add a class of f-align-margin when you need to align the action trigger with a content block above it or below it.

  • Heavyweight: Add a class of f-heavyweight to give an action trigger the visual styling of a button. Default colors are used in this case.


  • Schema definition: The action-trigger schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Text with glyph (button)

<button class="c-action-trigger c-glyph glyph-edit">Action trigger</button>

Text only

<button class="c-action-trigger">Action trigger</button>

Glyph only

<button class="c-action-trigger c-glyph glyph-edit" aria-label="Action trigger" data-f-describedby="editTooltip"></button>
<span id="editTooltip" class="c-tooltip" role="tooltip" aria-hidden="true">Edit</span>

Text with glyph (button) with heavyweight style

<button class="c-action-trigger c-glyph glyph-edit f-heavyweight">Action trigger</button>

Text with glyph (anchor)

<a class="c-action-trigger c-glyph glyph-edit" href="#">Action trigger</a>

All Glyphs

<div class="c-group f-wrap-items">
    <a class="c-action-trigger c-glyph glyph-edit" href="#">glyph-edit</a>
    <a class="c-action-trigger c-glyph glyph-cancel" href="#">glyph-cancel</a>
    <a class="c-action-trigger c-glyph glyph-chat-bubbles" href="#">glyph-chat-bubbles</a>
    <a class="c-action-trigger c-glyph glyph-global-nav-button" href="#">glyph-global-nav-button</a>
    <a class="c-action-trigger c-glyph glyph-shopping-cart" href="#">glyph-shopping-cart</a>
    <a class="c-action-trigger c-glyph glyph-chevron-left" href="#">glyph-chevron-left</a>
    <a class="c-action-trigger c-glyph glyph-chevron-right" href="#">glyph-chevron-right</a>
    <a class="c-action-trigger c-glyph glyph-chevron-up" href="#">glyph-chevron-up</a>
    <a class="c-action-trigger c-glyph glyph-chevron-down" href="#">glyph-chevron-down</a>
    <a class="c-action-trigger c-glyph glyph-phone" href="#">glyph-phone</a>
    <a class="c-action-trigger c-glyph glyph-play" href="#">glyph-play</a>
    <a class="c-action-trigger c-glyph glyph-info" href="#">glyph-info</a>
    <a class="c-action-trigger c-glyph glyph-download" href="#">glyph-download</a>