Interactive - How to use

Basic use (<button>)

Invocation of the component would look something like this:

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

In this case, since no @href or @route argument is provided it will generate in output an HTML <button> element.

Notice: a type="button" HTML attribute is applied by default to the element, but this can be overwritten using the "splattributes".

With "@href" parameter (<a>)

🚨 ATTENTION: we can't support the direct use of the href HTML attribute because we need to rely on the @href Ember argument to differentiate between different types of generated output.

If an @href argument is provided:

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

it will generate in output an HTML <a> link element with target="_blank" and rel="noopener noreferrer" attributes.

We add these attributes by default because this is the most common case (internal links are generally handled using a @route argument). This behavior can be overridden (see below).

If an @isHrefExternal argument is provided with false value:

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

it will generate in output an HTML <a> link element without the HTML target and rel attributes.

With "@route" parameter (<LinkTo>/<LinkToExternal>)

If a @route argument is provided: