Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Action links

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

Primary

See this in Storybook

Secondary

See this in Storybook

Reverse

See this in Storybook

Usability

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

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

Note: Action links will be replacing green primary buttons that link to another page.

  • Use a primary (green) Action Link for the primary call to action on a page or the start of a digital service.
  • 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. See the “Other link styles” section below for other link options.
  • Keep Action Link content short. Start with a verb. For example: “Apply for health care benefits” or “Register for care
  • The icon on the left of the Action Link can be slightly out of the grid to grab the user’s attention.
  • Primary (green) and secondary (blue) Action Links can exist on the same page, but we don’t recommend placing them side by side.
  • For links that have less hierarchy than an Action Link, we recommend using an Active Link. Active Links can be accompanied by a right-facing chevron icon for more emphasis.
  • Active text link style: Source Sans Pro (Bold), underlined, 16px, #004795

For example:

active link style

  • For links that need even less hierarchy than an Action Link or Active Link, we recommend using a Default Link.
  • Default text link style: Source Sans Pro (Regular), underlined, 16px, #004795)

For example:

default link style

  • All text links should be underlined. This is especially important for low-vision users. (Exception: side nav shouldn’t be underlined.)

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.
  • 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.
  • 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.
  • 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.
  • 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>
Edit this page in GitHub (Permissions required)