Indicators are a source of metadata that help customers find what they need quickly.

Test Status

Unwatched Approved Submitted for review Problem
<tk-indicator type="new">Unwatched</tk-indicator>
<tk-indicator type="approved">Approved</tk-indicator>
<tk-indicator type="pending">Submitted for review</tk-indicator>
<tk-indicator type="error">Problem</tk-indicator>


We use this pattern to indicate various meanings. new is used for announcing unwatched sessions. approved is used to notify a customer that a draft has been approved. pending is used to update a customer on the progress of a draft. error is used to notify the customer that the test encountered a problem.

Recorder Preview

0:00 0:02
<tk-indicator type="new">0:00</tk-indicator>
<tk-indicator type="record">0:02</tk-indicator>



  • Ensure the content matches the right indicator dot


  • Place two indicator dots next to each other