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.

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

Interactive