Components

Link - Action

Use: Deployed

Action links guide users to a new page to take an action or to start an online tool or digital service.

Examples

Usage

Action Links replace green primary buttons that take users to another page. For example: Apply for education benefits

When to use an Action Link

The action link is an eye-catching link to start a digital service. An action link entices users to take action. Example: Starting a benefit application.

Use a primary (green) Action Link for the primary call to action on a page or the start of a digital service. Use only one primary Action link per page.
Use a secondary (blue) Action Link when there are multiple Action Links on a page or if the actions are of equal hierarchy.
Use a reverse (white) Action Link for a dark background.

When to consider something else

Don’t use an Action Link for these actions: “sign up,” “submit” or “sign out.” For these actions, use buttons instead.
Don’t use Action Links to navigate between screens of an online application or tool. Use default and secondary buttons instead.
Don’t use Action Links link to go to another page or site that isn’t taking users to start an action.

Choosing between variations

Primary (green) and secondary (blue) Action Links can exist on the same page, but we don’t recommend placing them side by side.

Placement

The icon on the left of the Action Link can be slightly out of the grid to grab the user’s attention.

Content considerations

Keep Action Link content short. Start with a verb. For example: “Apply for health care benefits” or “Register for care”
Refer to the content considerations for the link.

Accessibility considerations

Action Links must have an href attribute.
Action links should only use an anchor tag <a>. The <a> element, or anchor element, is used to create a hyperlink to another webpage or another location within the same webpage.
For external links or links that open up to a new tab, make sure to add an aria label to let the user know what sort of link they’re clicking on.

Links vs. buttons

Using links and buttons intentionally results in a more inclusive experience for assistive technology users. Make sure to read both buttons and Action Link guidance to determine when you should use each component.
It is important to use Action Links for calls to actions that link to another page rather than buttons, because screen readers always say “link” before links, and “button” before buttons.
A good rule is if the action changes the URL, it should not be a button.
Button and link confusion can be very frustrating for assistive technology users. A user with a screen reader may pull up a list of links and may not find a specific link because it turns out that it’s been designated as a button in the markup.
When a file download is involved, it is best to use the download link component. This is because links are intended for navigation, and downloading a file is a navigational action to a resource.

Links to content in another language

Links that point to localized content in another language should have an hreflang attribute and a lang attribute in the following format:

<a
  href="#"
  hreflang="es"
  lang="es"
>En Español</a>