Link - ActionUse: Deployed
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.
- The icon on the left of the Action Link can be slightly out of the grid to grab the user’s attention.
- 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.
- Action Links must have an
- Action links should only use an anchor tag
<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
hreflangattribute and a
langattribute in the following format:
<a className="vads-c-action-link--blue" href="#" hreflang="es" lang="es" >En Español</a>