Indicator

Indicator Figma Code Connected

Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component.

Indicators work within badges, buttons, and other elements and can be used as a small element positioned absolutely relative to one of these to show a number count, account status (e.g., red for offline, green for online) and other useful information.

Default indicator

Semantic and product color indicators can be used anywhere you need to indicate a status or minmized label. These color classes apply to all of the various indicators listed here and always use the same class.

HTML
Expand Edit in Playground Copy 

<span class="hc-indicator"></span>
<span class="hc-indicator hc-indicator--primary"></span>
<span class="hc-indicator hc-indicator--attend"></span>
<span class="hc-indicator hc-indicator--boost"></span>
<span class="hc-indicator hc-indicator--connect"></span>
<span class="hc-indicator hc-indicator--forms"></span>
<span class="hc-indicator hc-indicator--sites"></span>
<span class="hc-indicator hc-indicator--danger"></span>
<span class="hc-indicator hc-indicator--warning"></span>
<span class="hc-indicator hc-indicator--success"></span>
<span class="hc-indicator hc-indicator--info"></span>

Legend indicator

This option is similar to a simple indicator but adds a label. These can be used as chart legends or another type of label or category.

Teachers Coaches Administrators Staff
HTML
Expand Edit in Playground Copy 

<span class="hc-indicator-legend">
    <span class="hc-indicator hc-indicator--primary"></span>
    Teachers
</span>
<span class="hc-indicator-legend">
    <span class="hc-indicator hc-indicator--success"></span>
    Coaches
</span>
<span class="hc-indicator-legend">
    <span class="hc-indicator hc-indicator--info"></span>
    Administrators
</span>
<span class="hc-indicator-legend">
    <span class="hc-indicator hc-indicator--danger"></span>
    Staff
</span>

Count indicator

Count indicators can be used to show a number count inside the indicator and position it relative to a button component. Use the position classes below to place it anywhere around a parent element.

Note that for product count and label indicators, the background color changes to the product’s tertiary/accent color.

HTML
Expand Edit in Playground Copy 

<button type="button" class="hc-button hc-button--primary relative">
    <i class="hc-icon hc-icon--mail"></i>
    Messages
    <span class="hc-indicator-count hc-indicator-count--border hc-indicator--danger hc-indicator--top-right">8</span>
</button>
<button type="button" class="hc-button hc-button--connect hc-button--primary relative">
    <i class="hc-icon hc-icon--mail"></i>
    Messages
    <span class="hc-indicator-count hc-indicator-count--border hc-indicator--connect hc-indicator--top-right">8</span>
</button>

Label indicator

Label indicators are like count indicators but can accept longer text labels instead of just a number. Use these when the text may be variable inside of the indicator and more than just 1 digit or character.

These are also great for “New!” or other similar statuses that require an indicator like this.

Freddie Spaghetti
Wayne Elementary School
New!
HTML
Expand Edit in Playground Copy 

<div class="hc-card">
  <section class="hc-card-main">
    <div class="hc-card-title">
      <h5 class="hc-h5">Freddie Spaghetti</h5>
    </div>
    <span class="hc-card-sub">Wayne Elementary School</span>
  </section>
  <span class="hc-indicator-label hc-indicator-label--border hc-indicator--danger hc-indicator--top-right">New!</span>
</div>

Status indicator

Display a status indicator on a user avatar or some other component to indicate online/offline or some other condition or activity status.

HTML
Expand Edit in Playground Copy 

<div class="hc-relative">
    <img src="https://ui-avatars.com/api/?background=random&name=Daniel+Gioia" class="rounded-full w-12 h-12">
    <span class="hc-indicator-status hc-indicator--success hc-indicator--top-right">
</div>
<div class="hc-relative">
    <img src="https://ui-avatars.com/api/?background=random&name=James+Gioia" class="rounded-full w-12 h-12">
    <span class="hc-indicator-status hc-indicator--danger hc-indicator--bottom-right">
</div>

Indicator positions

Use convenience classes to position the indicators at 9 different spots.

top-left top-center top-right middle-left middle-center middle-right bottom-left bottom-center bottom-right
HTML
Expand Edit in Playground Copy 

<div class="relative w-96 h-56 bg-info-50 border border-info-200 rounded-lg my-4">
    <span class="hc-indicator-label hc-indicator--top-left">top-left</span>
    <span class="hc-indicator-label hc-indicator--top-center">top-center</span>
    <span class="hc-indicator-label hc-indicator--top-right">top-right</span>
    <span class="hc-indicator-label hc-indicator--middle-left">middle-left</span>
    <span class="hc-indicator-label hc-indicator--middle-center">middle-center</span>
    <span class="hc-indicator-label hc-indicator--middle-right">middle-right</span>
    <span class="hc-indicator-label hc-indicator--bottom-left">bottom-left</span>
    <span class="hc-indicator-label hc-indicator--bottom-center">bottom-center</span>
    <span class="hc-indicator-label hc-indicator--bottom-right">bottom-right</span>
</div>