Back to all examples

Link to an external page

<GoabxLink trailingIcon="open">
      <a href="#external-url">External link</a>
    </GoabxLink>
<goabx-link trailingIcon="open">
  <a href="#external-url">External link</a>
</goabx-link>
<goa-link trailingicon="open">
  <a href="#external-url">External link</a>
</goa-link>

Use an external link indicator to show users when a link will take them to a different website.

When to use

Use this pattern when:

  • Linking to websites outside your service
  • Users should be aware they’re leaving the current site
  • Providing references to external resources
  • Following accessibility best practices for external links

Considerations

  • Use the “open” trailing icon to indicate external links
  • Consider whether the link should open in a new tab
  • Ensure the link text clearly describes the destination
  • External links should be used sparingly and with purpose