Interactive

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>

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

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::Interactive @href="https://google.com">
    your content here
</Hds::Interactive>

Adding @isHrefExternal=false

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.

<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

Interactive