Badge Figma Code Connected

Badges are small elements to show counts or labels separately or inside other components. There are 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

Use the default badge to indicate counts, labels, or statuses inside or outside components.

Default Primary Danger Success Warning Info

HTML

Expand Edit in Playground Copy


<span class="hc-badge">Default</span>
<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>

Large badges

Use the .hc-badge--lg modifier and increase the height to create a larger variant.

Default Primary Danger Success Warning Info

HTML

Expand Edit in Playground Copy


<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.

Not started Complete In Progress Shared

HTML

Expand Edit in Playground Copy


<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--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.

3 days ago 2 minutes ago

HTML

Expand Edit in Playground Copy


<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.

HTML

Expand Edit in Playground Copy


<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.

Fox McCloud

Falco Lombardi

HTML

Expand Edit in Playground Copy


<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>