Indicator

Indicator Figma

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.

If a theme is applied, appending the class .hc-theme will apply the theme’s colors.

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-theme"></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.

To create a legend indicator, wrap a regular indicator inside of an element with class .hc-indicator-legend.

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. Create these by appending the class .hc-indicator--count to an indicator.

Optionally, you can position it relative to a button component or some other component to layer it over top. 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.

1 3 3
HTML
Expand Edit in Playground Copy 

<span class="hc-indicator hc-indicator--count">1</span>
<span class="hc-indicator hc-indicator--count hc-indicator--danger">3</span>
<span class="hc-indicator hc-indicator--count hc-indicator--sm hc-theme">3</span>
<button type="button" class="hc-button hc-button--primary relative">
  <i class="hc-icon hc-icon--mail"></i>
  Messages
  <span class="hc-indicator hc-indicator--count hc-indicator--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 hc-indicator--count hc-indicator--border hc-indicator--connect hc-indicator--top-right">8</span>
</button>

Icon indicator

Icon indicators are just like count indicators but they use an icon instead of text or a number. Create these by appending the class .hc-indicator--icon to an indicator.

You can position these the same way you would a count indicator using the positional classes.

HTML
Expand Edit in Playground Copy 

<span class="hc-indicator hc-indicator--icon">
  <i class="hc-icon hc-icon--globe"></i>
</span>
<span class="hc-indicator hc-indicator--icon hc-indicator--sm hc-theme">
  <i class="hc-icon hc-icon--warning-triangle"></i>
</span>
<button type="button" class="hc-button hc-button--primary">
  <i class="hc-icon hc-icon--clipboard"></i>
  Summatives
  <span class="hc-indicator hc-indicator--icon hc-indicator--border hc-indicator--info hc-indicator--top-right">
    <i class="hc-icon hc-icon--lightbulb"></i>
  </span>
</button>

Note that for normally sized icon indicators, the icon is in outline mode by default. For small indicators, we enforce the solid mode for readability.

You can always manually set the icon in an icon indicator to use the solid mode by appending the class .hc-icon--solid or setting the font weight to bold.

Label indicators

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 hc-indicator--label hc-indicator--border hc-indicator--danger hc-indicator--top-right">New!</span>
</div>
<button type="button" class="hc-button hc-button--primary">
  <i class="hc-icon hc-icon--clipboard"></i>
  Summatives
  <span class="hc-indicator hc-indicator--label hc-indicator--border hc-indicator--info hc-indicator--top-right hc-indicator--sm">New!</span>
</button>

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.

Daniel Gioia's avatar
James Gioia's avatar
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" alt="Daniel Gioia's avatar">
  <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" alt="James Gioia's avatar">
  <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>