Usage

When to use

• To navigate to a new destination, either internally or externally.
• As a standalone element or within a Button Set.

When not to use

• Within a body of text, consider Inline Link.
• To trigger an action or event, like a form submission, consider Button.

Size

We recommend using a medium size, but use whichever size fits best in the UI. For example, don’t use large links in tables.

Color

Primary

We recommend using the primary variant as the default and for more important links.

For example, when navigating the user to “View clusters”:

Secondary

Use the Secondary variant for less important links, when the primary color can’t be used, or when creating a list of links.

For example, on an install page, when navigating the user to “Learn more about Vault”:

Icon position

A Standalone Link can include a leading or trailing icon. Avoid creating links with both leading and trailing icons.

Leading

In most cases, use leading icons. Choose icons that add meaning and clarity to the action described in the link’s text.

Trailing

Consider trailing icons when there’s no other meaningful icon or when guiding the user forward through the product.

• Use arrow-right for internal links.
• Use learn-link for links to tutorials.
• Use docs-link for links to documentation or installation guides.
• Use external-link for external links.

To learn more about icon best practices, review our Icon usage guidelines.

Spacing between links

Vertical list

We recommend at least 8px between Standalone Links when placed in a horizontal list.

Horizontal list

We recommend at least 16px between Standalone Links when placed in a horizontal list.

Common patterns

Within Button Sets

Standalone Links often appear in Button Sets.

The Standalone Link handles the generation of:

• an HTML anchor element <a> that points to an external URL (when using a @href argument)
• an Ember component <LinkTo> that points to an internal application link or resource (when using a @route argument)

How to use this component

The most basic invocation requires both @icon and @text, and either an @href or @route argument.

<Hds::Link::Standalone @icon="film" @text="Watch tutorial video" @href="https://helios.hashicorp.design/" />

Icon position

By default the icon is placed before the text. If you would like to position it after the text, set @iconPosition to trailing.