Design
Overview
Colours
Typography
Icons
Dark mode
Avatar pickers
Avatars
Badges
Breadcrumbs
Buttons
Cards
Empty states
Hoowla link
Nav items
Stat cards
Steppers
Sticky headers
Switchers
Tables
Tabs
Timelines
Charts
Load more
Rich text
Tooltips
Action menus
Forms
Autocomplete
Modals
Notifications
Side trays
Confetti
Guided tour
Period filters
Hoowla link
Use the <koala-hoowla-link> tag helper
for links to Hoowla entities (cases, quotes, people). Renders the Hoowla logo, "Hoowla" label, and an external link icon.
When no href is provided, renders a sync button
that calls syncHoowla() with a loading spinner.
Linked (has Hoowla ID)
When the entity is already synced to Hoowla. Renders an anchor that opens Hoowla in a new tab.
<koala-hoowla-link href="https://app.hoowla.com/app/case?case=123" tooltip="Case 123" />
Unlinked (sync button)
When the entity has not been synced to Hoowla yet. Renders a button that triggers on-demand sync.
Requires syncHoowla() and
hoowlaSyncing in the parent
x-data.
<koala-hoowla-link />
Attributes
| Attribute | Type | Description |
|---|---|---|
href |
string? |
Hoowla URL. When set, renders an <a>. When null, renders a sync <button>. |
tooltip |
string? |
Tooltip text (e.g. "Case 123"). Only applies when href is set. |
Usage guidance
| Page | When to show | What sync creates |
|---|---|---|
| View transaction | Always | Contact person, user person, bespoke quote, case |
| View quote | When quote has transactions | Contact person, user person, bespoke quote, all cases |
| View user | When user has transactions | User person, all quotes, all cases |