Standalone Link

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.

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

Color

There are two available colors for a Standalone Link: primary and secondary. The default is primary. To use the other option, set @color to secondary.

<Hds::Link::Standalone
  @color="secondary"
  @icon="collections"
  @text="Read tutorial"
  @href="https://helios.hashicorp.design/"
/>

Size

There are three sizes available: small, medium, and large. The default is medium. To use a different size, set a value for @size:

<Hds::Link::Standalone
  @icon="collections"
  @text="Read tutorial"
  @size="small"
  @href="https://helios.hashicorp.design/"
/>

<Hds::Link::Standalone
  @icon="collections"
  @text="Read tutorial"
  @size="large"
  @href="https://helios.hashicorp.design/"
/>

URL and route handling

To generate an Inline Link, pass an @href or @route argument to the component. If neither are provided, the component will throw an error.

Standalone Links use the generic Hds::Interactive component. Learn more about how the Interactive utility component works.

With @href

To generate an <a> link, pass an @href argument with a URL as the value.

By default, the link is considered "external", which means that the target=“_blank” and rel=“noopener noreferrer” attributes are applied to the <a> element. This is the most common case, as internal links are generally handled using a @route argument.

<Hds::Link::Standalone
  @icon="terraform"
  @text="Request a demo"
  @href="https://www.hashicorp.com/request-demo/terraform"
/>

If the @href points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass @isHrefExternal=false to the component and it will omit the target and rel attributes.

With @route

All the standard arguments for the <LinkTo/LinkToExternal> components are supported (eg. models/model/query/current-when/replace).

For <LinkTo>

To generate an <a> link using a <LinkTo> Ember component, pass a @route argument.

<Hds::Link::Standalone @icon="collections" @text="Go to the index page" @route="my.page.route" @model="my.page.model" />

For <LinkToExternal>

If the route is external to your current engine, pass @isRouteExternal=true to the component so that it will use <LinkToExternal> instead of <LinkTo>.

Component API

Link::Standalone

Anatomy

*A Standalone Link should always include an icon

States

Primary

Secondary

General recommendations

Use language consistently within each product (e.g., if “Edit” is used on one page, use that same convention throughout, instead of a similar word such as "Change").

Conformance rating

When used as recommended, there should not be any WCAG conformance issues with this component.

Best Practices

Annotations in design

Include annotations of the non-visual experience in your handoff notes. For example:

Interactive transitions

Animations or transitions will not take place if the user has prefers-reduced-motion enabled in their browser.

Applicable WCAG Success Criteria

This section is for reference only. This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

6.3.0

Set explicit secondary hover state color to avoid possible overrides.

6.1.0

Removed usage of hdsLinkToModels and hdsLinkToQuery helpers, instead forward the arguments to HdsInteractive.

6.0.0

converted component to gts format.