Components Note bubble

Note bubble

Chat-bubble button rendered next to the client name on quote and transaction list rows. The number reads as the note count; clicking it opens the shared note browser modal and fetches notes one at a time (newest first).

<koala-note-bubble>

Canonical

Jane Doe

Sits inline with the client name on list rows. The compact count reads at a glance — the trigger only loads notes when clicked, so listing pages stay fast.

Variants

3 variants

Empty

count=0

Single

count=1

Many

count=24

States

2 states

Default

Hover

Hover the bubble to see the surface-dim chip

Props

3 properties

Property	Type	Notes
NoteCount	int	Required. Displayed in the bubble and used for the aria-label.
ViewUrl	string	Required. Base URL for the entity; `?handler=Note` fetches one note, `?tab=notes` deep-links to the full notes tab.
Reference	string	Required. Used in the modal title: `Notes for {Reference}`.

Do & don't

Jane Doe

Do Place the bubble immediately after the client name on list rows. The user already has the context of which row they're inspecting.

(no row context)

Don't Don't show the bubble outside a row that identifies its entity. The modal title needs a reference to render correctly.