Link - Action

Examples

Primary Entry

View va-link-action primary entry in Storybook

Primary

View va-link-action primary in Storybook

Secondary

View va-link-action secondary in Storybook

Reverse

View va-link-action reverse in Storybook

Usage

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.

• Primary entry is for entry points to an application. The Link - Action - Primary entry variation was added to stand out within text-heavy pages and to be distinct from a button, yet have a similar visual weight to a button for emphasis. Use the Primary entry variation to start an application. Current examples include the Form Upload tool and form-based applications. This variation replaces the Link - Action - Primary (green) variation which had been used for this purpose. Use only one Link - Action - Primary entry per page.
• Primary calls to action. A Link - Action - Primary (green) can be used for the primary call to action on a page. A Primary entry variation is preferred, but the Primary variation is allowed. Use only one Link - Action - Primary per page.
• Use the secondary variation for additional important links. Use the Link - Action - Secondary (blue) variation when there are multiple Action Links on a page or if the actions are of equal hierarchy.
• Use the Link - Action - Reverse (white) variation for a dark background. The reverse variation exists to meet contrast on dark backgrounds. This variation is used sparingly.
• Primary and secondary can go on the same page. Link - Action - Primary (green) and Link - Action - Secondary (blue) instances can exist on the same page, but we don’t recommend placing them side by side.

When to consider something else

• Use buttons for authentication action.s Don’t use Link - Action for these actions: “sign up,” “submit” or “sign out.” For these actions, use buttons instead.
• Use a button for going to the next step in a form. Use Button - Primary for moving between steps of an online application or tool. This is considered an action rather than navigation. Note that we prefer a Back link for navigation backward in a flow but have instances of using a Button - Secondary in most forms.
• Don’t use Link - Action for non-actions. Link - Action is not meant to replace all links. It should be used explicitly for actions.

Content considerations

• Keep Link - Action content short. Start with a verb. For example: “Apply for health care benefits” or “Register for care”
• Refer to the Content Style Guide on Links.

Accessibility considerations

• Purpose and target. Link text that doesn’t indicate a clear purpose or destination makes it harder for everyone–especially screen reader users–to understand where they’re getting routed off to.
• External links must indicate that they are external. Follow the methods detailed in linking to external sites.
  • By default, the link component’s external link variation will append the text, “(opens in a new tab)”, instead of using an icon. This follows Techniques for WCAG 2.0 advice on providing users with both a spoken and visual warning that this link opens in a new tab.

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.