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

Interactive

An internal utility component used to provide interactivity to other components.

This component is intended only for internal Helios use. If you need to use it, please contact the Design Systems Team.

How to use this component

Default use for <button>

When no @href or @route arguments are provided, it generates an HTML <button> element.

The type=“button” HTML attribute is applied to the element by default, but can be overwritten using the “splattributes”.

<Hds::Interactive>
    your content here (will be yielded)
</Hds::Interactive>

With @href parameter for <a>

We can’t support direct use of the href HTML attribute because we rely on the @href Ember argument to differentiate between different types of generated output.

Provide an @href argument to generate an HTML <a> link element.

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 but can be overridden.

<Hds::Interactive @href="https://google.com">
    your content here
</Hds::Interactive>

Adding @isHrefExternal=false

Provide an @isHrefExternal argument to generate an HTML <a> link element without the HTML target and rel attributes.

<Hds::Interactive @href="#your-local-anchor-id" @isHrefExternal={{false}}>
    your content here
</Hds::Interactive>

With @route parameter for <LinkTo>/<LinkToExternal>

All the standard arguments for the <LinkTo>/<LinkToExternal> components are supported (e.g., models, model, query, current-when, replace). For more details about these parameters see the Ember documentation or the LinkTo component API specs.

For <LinkTo>

Provide a @route argument to generate a <LinkTo> component.

<Hds::Interactive @route="components">
    your content here
</Hds::Interactive>

For <LinkToExternal>

When the @route is external to the current engine, provide the @isRouteExternal parameter to generate a <LinkToExternal> component. Learn more about LinkToExternal.

<Hds::Interactive @route="components" @isRouteExternal={{true}}>
    your content here
</Hds::Interactive>

Component API

Name
href
Description
URL parameter that’s passed down to the <a> element.
Name
isHrefExternal
Type
boolean
Values
  • false (default)
  • true
Description
This 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
This controls if the “LinkTo” is external to the Ember engine, in which case it will use a <LinkToExternal> for the @route.
Name
…attributes
Description
This component supports use of ...attributes.

On this page: