The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Inline Link

Figma GitHub

A link used within a body of text.

An Inline 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)

Usage

Usage documentation for this component is coming soon. In the meantime, help us improve this documentation by letting us know how your team is using it in #team-design-systems (internal only).

How to use this component

The most basic invocation requires some content to be passed as children and either an @href or @route argument.

Watch tutorial video 
<Hds::Link::Inline @href="...">Watch tutorial video</Hds::Link::Inline>

Color

There are two available colors for a Inline Link: primary and secondary. The default is primary. To use a different color, set @color to secondary.

Read tutorial 
<Hds::Link::Inline @color="primary" @href="...">Read tutorial</Hds::Link::Inline>
Read tutorial 
<Hds::Link::Inline @color="secondary" @href="...">Read tutorial</Hds::Link::Inline>

Icon

To add an icon to your inline link, give the @icon argument any Helios icon name.

Hds::Link::Inline does not have an intrinsic size. Instead, the size of the icon is calculated proportionally (via em) in relation to the font-size of the text.

Watch tutorial video 
<Hds::Link::Inline @href="..." @icon="external-link">Watch tutorial video</Hds::Link::Inline>

Icon position

By default, if you define an icon, it‘s placed in the trailing (right) position. If you would like to position the icon in the leading (left) position, define @iconPosition.

Watch tutorial video 
<Hds::Link::Inline @href="..." @icon="film" @iconPosition="leading">Watch tutorial video</Hds::Link::Inline>

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.

Inline 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.

target=“_blank” and rel=“noopener noreferrer” attributes are applied by default. This is the most common case, as internal links are generally handled using a @route argument.

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

If the @href argument points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass @isHrefExternal=true 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 (e.g., models/model/query/current-when/replace).

For <LinkTo>

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

Go to the index page 
<Hds::Link::Inline @route="my.page.route" @model="my.page.model">Go to the index page</Hds::Link::Inline>
For <LinkToExternal>

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

Component API

Name
color
Type
enum
Values
  • primary (default)
  • secondary
Name
icon
Type
string
Description
Use this parameter to show an icon. Any icon name is acceptable.
Name
iconPosition
Type
enum
Values
  • leading
  • trailing (default)
Description
Positions the icon before or after the text.
Name
href
Description
URL parameter that’s passed down to the <a> element.
Name
isHrefExternal
Type
boolean
Values
  • false (default)
  • true
Description
Controls if the <a> link is external. For security reasons, we add the target="_blank" and rel="noopener noreferrer" attributes to it by default.
Name
route models model query current-when replace
Description
Parameters that are passed down as arguments to the <LinkTo>/<LinkToExternal> components.
Name
isRouteExternal
Type
boolean
Values
  • false (default)
  • true
Description
Controls if the “LinkTo” is external to the Ember engine, in which case it will use a <LinkToExternal> for the @route.
Name
yield
Description
Elements passed as children are yielded to the content of the <a> HTML element.
Name
…attributes
Description
This component supports use of ...attributes.

On this page: