Components Hoowla link

Hoowla link

The Hoowla logo + label used to deep-link into the third-party case management system, or as the body of an unlinked sync button when the record isn't yet linked.

<koala-hoowla-cta>

Canonical

Hoowla

<koala-hoowla-link href="@Model.HoowlaUrl" />

Deep-link into Hoowla. Opens in a new tab. Logo + label + external-link glyph in a single hover group.

Variants

3 variants

Hoowla

Linked

<koala-hoowla-link>

Acme Legal

Custom label

label="Acme Legal"

Sync button

<koala-hoowla-cta>

Custom label — override the default Hoowla text with the entity name.

<koala-hoowla-link href="@Model.HoowlaUrl" label="Acme Legal" />

Sync button — wrap <koala-hoowla-cta> in a button for an unlinked record.

<button type="button" class="group inline-flex items-center gap-1 shrink-0">
    <koala-hoowla-cta label="Sync to Hoowla" />
</button>

States

4 states

Hoowla

Default

Hover me

Hover

Label underlines, colour darkens.

Tab to me

Focus

Use the keyboard to reach it.

Disabled

Props

3 attributes

Props on <koala-hoowla-link>.

Attribute	Values	Notes
href	string	Required. The Hoowla URL. Opens in a new tab.
label	string?	Defaults to `Hoowla`. Override with the entity name when contextually clearer.
tooltip	string?	Optional tippy tooltip on the link.

Do & don't

Hoowla

Do Always pair the logo with the external-link glyph so the user knows the link leaves the app.

Hoowla

Don't Don't render Hoowla as a plain text link. The logo is the recognition cue — partners scan for it on every transaction.