Link - Action

Examples

Primary

See this in Storybook

Secondary

See this in Storybook

Reverse

See this in Storybook

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.

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
  className="vads-c-action-link--blue"  
  href="#"
  hreflang="es"
  lang="es"
>En Español</a>