Base

  • Colors
  • Icons
  • Logos
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Filters
  • Gallery card
  • Indicators
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toast
  • Toggle button
  • Typeahead

Form

  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Tabs
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message

Usertesting-next

  • Cards
  • Colors
  • Segmented Controls
  • Shadows and Elevations
  • Spacing
  • Typography

Visualizations

  • Data Colors

Indicators

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

Test Status

Unwatched Approved Submitted for review Problem
Expand Copy
<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>

Description

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
Copy
<tk-indicator type="new">0:00</tk-indicator>
<tk-indicator type="record">0:02</tk-indicator>

Size

5 unwatched sessions 5 unwatched sessions
Copy
<tk-indicator size="small">5 unwatched sessions</tk-indicator>
<tk-indicator size="large">5 unwatched sessions</tk-indicator>

Icon

Waiting for approval Ready to launch
Copy
<tk-indicator size="large" type="pending" icon="eye">Waiting for approval</tk-indicator>
<tk-indicator size="large" type="pending" icon="thumbs-up">Ready to launch</tk-indicator>

Usage

Do

  • Ensure the content matches the right indicator dot

Don't

  • Place two indicator dots next to each other