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.

The Link::Inline component 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).

Component API

Name
color
Type
enum
Values
  • primary (default)
  • secondary
Name
yield
Description
Elements passed as children are yielded to the content of the <a> HTML element.
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
This is the URL parameter that is passed down to the <a> element.
Name
isHrefExternal
Type
boolean
Values
  • false (default)
  • true
Description
This controls if the <a> link is external and so for security reasons we need to add the target="_blank" and rel="noopener noreferrer" attributes to it.
Name
route models model query current-when replace
Description
These are the parameters that are passed down as arguments to the <LinkTo/LinkToExternal> component. For more details about these parameters see the Ember documentation or the LinkTo component API specs.
Name
isRouteExternal
Type
boolean
Values
  • false (default)
  • true
Description
This controls if the "LinkTo" is external to the Ember engine (more details here) in which case it will use a <LinkToExternal> instead of a simple <LinkTo> for the @route.
Name
…attributes
Description
This component supports use of ...attributes.

How to use this component

The most basic invocation requires some content to be passed as children and one of the two @href or @route arguments (for details on how URLs and routing are handled see below).

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

Icon

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

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

Since the Hds::Link::Inline doesn’t have an intrinsic size, the size of the icon is calculated proportionally (via em) in relation to the font-size of the text.

Icon position

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

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

Color

There are two available colors for a Link (Inline): primary and secondary. The default is primary. To use a different color, declare another value for @color.

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

URLs and routes handling

You can generate an inline link passing a @href or a @route to the component. If none of the two is provided, the component will throw an error.

The Link::Inline component internally uses the generic Hds::Interactive component. For more details about how this low-level component works please refer to its documentation page.

With @href

If you pass a @href argument a <a> link will be generated:

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

Important: when using the @href argument the component adds by default the attributes target="_blank" and rel="noopener noreferrer" to the <a> element (because this is the most common use case: internal links are generally handled using a @route argument). If the href points to an internal link, or uses a different protocol (eg. "mailto" of "ftp") you can pass @isHrefExternal=true to the component and it will not add the target and rel attributes (but you can pass yours if needed, using the ...attributes spreading. For more details see the Hds::Interactive component.

With @route

If you pass a @route argument a <a> link will be generated using a <LinkTo> Ember component:

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

If the route is external to your current engine you have to pass also @isRouteExternal=true to the component so that it will use <LinkToExternal> instead of a simple <LinkTo> for the @route. For more details see the Hds::Interactive component.

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

On this page: