Koala logo Design
No matches for “
↑↓ navigate open Esc close
Components Call log

Call log

The softphone call history — a calm list of calls, each with a status-tinted phone glyph, the other party (contact name or number), relative time, who handled it, the connected duration, and an outcome badge. Rows optionally carry a reference chip linking to the transaction or quote the call belongs to. Used by the per-transaction Calls tab and the global own-calls page.

<koala-call-log>
  • Jane Carter
    2 hours agoMarcus Webb
    4m 12sCompleted
  • 07700 900123
    yesterdayMarcus Webb
    No answer
  • Priya Shah
    3 days agoJane Carter
    48sCompleted
  • 07700 900456
    last weekMarcus Webb
    Failed
<koala-call-log model="@callLog" />

The default shape — the per-transaction Calls tab. The transaction is already the context, so rows carry no reference chip.

1 variant

With reference chips

On the global own-calls page a call can belong to any transaction or quote, so each row links to it via a ContextLabel / ContextUrl chip.

  • Jane Carter
    2 hours agoMarcus WebbP-VRMUDC
    4m 12sCompleted
  • 07700 900123
    yesterdayMarcus WebbQ-OQKBLK
    No answer
4 outcomes

The status badge and the glyph tint come from the call outcome: Completed → Success, No answer / Busy → Warning, Failed → Danger, and dialling / ringing / cancelled → Neutral.

  • Completed call
    just now
    4m 12sCompleted
  • Unanswered call
    just now
    No answer
  • Failed call
    just now
    Failed
  • Cancelled call
    just now
    Cancelled
1 attribute
Attribute Values Notes
model CallLogModel Holds Calls — a list of CallLogItem (party, outbound, status label + colour, duration, relative time, who handled it, optional reference chip). Shape a CallEntity with CallLogFactory.From.

No calls yet

Calls to this transaction's contacts will show up here.

Do Compose a koala-empty-state when the list is empty — the copy differs per surface, so the caller owns it.
Bespoke ul/li call markup
Don't Don't hand-roll call rows in the page. Shape the data with CallLogFactory and let koala-call-log render it, so both surfaces stay identical.