Badge FigmaFigma Code Connected

Badges are small elements to show counts or labels separately or inside other components. These are also sometimes called chips and come in a variety of styles and variations, including interactable ones.

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.

Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a span element.

Default badge

Create a default badge by adding the class .hc-badge to any inline element (typically a <span>). Use this badge for subtle labeling or when you want the badge to blend with the surrounding interface.

<span class="hc-badge">Default</span>

Colors

You can add semantic and brand colors to badges to signal various states and information.

Semantic badges

Semantic colors are available via .hc-badge--success and the other semantic names.

Use semantic badges to visually communicate status or meaning. These should only be used when the badge is directly tied to specific content. For instance, use these for states like “Approved,” “Overdue,” or “Suspended.”

<span class="hc-badge hc-badge--primary">Primary</span>
<span class="hc-badge hc-badge--danger">Danger</span>
<span class="hc-badge hc-badge--success">Success</span>
<span class="hc-badge hc-badge--warning">Warning</span>
<span class="hc-badge hc-badge--info">Info</span>

Brand variants

Each brand has their own color variant as well. Append the brand class in the form of .hc-badge--attend to apply the brand variant.

Alternatively, to apply the selected theme, append .hc-theme to the badge.

Brand badges should be used as general metadata that don’t carry inherent status or urgency, when you need a bolder indicator compared to the subtle default badge. Use these when the badge is purely decorative, you need visual differentiation across multiple badges, or you want to reinforce brand identity.

<span class="hc-badge hc-theme">Theme</span>
&nbsp;&nbsp;
<span class="hc-badge hc-badge--attend">Attend</span>
<span class="hc-badge hc-badge--boost">Boost</span>
<span class="hc-badge hc-badge--connect">Connect</span>
<span class="hc-badge hc-badge--forms">Forms &amp; Flows</span>
<span class="hc-badge hc-badge--sites">Sites</span>

Large modifier

Append the .hc-badge--lg modifier to increase the height and font size. These are useful when they stand alone in a page header or drawer.

<span class="hc-badge hc-badge--lg">Default</span>
<span class="hc-badge hc-badge--lg hc-badge--primary">Primary</span>
<span class="hc-badge hc-badge--lg hc-badge--danger">Danger</span>
<span class="hc-badge hc-badge--lg hc-badge--success">Success</span>
<span class="hc-badge hc-badge--lg hc-badge--warning">Warning</span>
<span class="hc-badge hc-badge--lg hc-badge--info">Info</span>

Bold modifier

Sometimes a larger or bolder badge is necessary to convey prominent information, like a status that should be extremely apparent or a solitary label in a large interface component.

Create bold badges with the .hc-badge--bold modifier to make any of the above badge styles slightly larger and higher contrast. Combine with .hc-badge--lg to increase the size further.

<span class="hc-badge hc-badge--bold">Not started</span>
<span class="hc-badge hc-badge--bold hc-badge--success">Complete</span>
<span class="hc-badge hc-badge--bold hc-badge--forms">Submitted</span>
<span class="hc-badge hc-badge--bold hc-badge--warning hc-badge--lg">In Progress</span>
<span class="hc-badge hc-badge--bold hc-badge--info hc-badge--icon hc-badge--lg">
    <i class="hc-icon hc-icon--send hc-icon--solid hc-icon--16"></i> Shared
</span>

Icon badge

You can also use icons inside the badge elements. If you add .hc-badge--icon to the badge itself these will be formatted and sized automatically.

<span class="hc-badge hc-badge--icon">
    <i class="hc-icon hc-icon--clock hc-icon--12 hc-icon--solid"></i>
    3 days ago
</span>
<span class="hc-badge hc-badge--icon hc-badge--info">
    <i class="hc-icon hc-icon--clock hc-icon--12 hc-icon--solid"></i>
    2 minutes ago
</span>

Alternatively, you can also use badges which indicate only an icon by swapping the class to .hc-badge--icon-only. These icons should have the .hc-icon--12 size so that they don’t look so large given the icon badge’s default padding.

<span class="hc-badge hc-badge--icon-only">
    <i class="hc-icon hc-icon--check hc-icon--12"></i>
</span>
<span class="hc-badge hc-badge--icon-only hc-badge--info">
   <i class="hc-icon hc-icon--clock hc-icon--12 hc-icon--solid"></i>
</span>
<span class="hc-badge hc-badge--icon-only hc-badge--success">
    <i class="hc-icon hc-icon--check hc-icon--12"></i>
</span>
<span class="hc-badge hc-badge--icon-only hc-badge--primary hc-badge--bold">
    <i class="hc-icon hc-icon--checks hc-icon--solid hc-icon--12"></i>
</span>

Avatar badge

Badge components with a user avatar or image are more fully defined in the separate user badge component, but you can create this effect in a simpler context with the class .hc-badge--avatar.

The image you select will be sized automatically, so make use of the size modifier classes on the parent badge to adjust accordingly.

<span class="hc-badge hc-badge--avatar">
    <img src="https://ui-avatars.com/api/?name=Fox+McCloud&background=random" alt="Fox McCloud" title="Fox McCloud avatar">
    <span>Fox McCloud</span>
</span>
<span class="hc-badge hc-badge--avatar hc-badge--lg hc-badge--primary">
    <img src="https://ui-avatars.com/api/?name=Falco+Lombardi&background=random" alt="Falco Lombardi" title="Falco Lombardi avatar">
    <span>Falco Lombardi</span>
</span>