Badge
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 or labels inside or outside components.
<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 paddings to create a larger variant of the badges.
<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>
Bordered badges
Use the .hc-badge--border modifier to add a border accent to the badge component.
<span class="hc-badge hc-badge--border">Default</span> <span class="hc-badge hc-badge--border hc-badge--primary">Primary</span> <span class="hc-badge hc-badge--border hc-badge--danger">Danger</span> <span class="hc-badge hc-badge--border hc-badge--success">Success</span> <span class="hc-badge hc-badge--border hc-badge--warning">Warning</span> <span class="hc-badge hc-badge--border hc-badge--info">Info</span>
Pill badges
If pill-style badges make more sense visually, use the .hc-badge--pill modifier to completely round the corners.
<span class="hc-badge hc-badge--pill">Default</span> <span class="hc-badge hc-badge--pill hc-badge--primary">Primary</span> <span class="hc-badge hc-badge--pill hc-badge--danger">Danger</span> <span class="hc-badge hc-badge--pill hc-badge--success">Success</span> <span class="hc-badge hc-badge--pill hc-badge--warning">Warning</span> <span class="hc-badge hc-badge--pill hc-badge--info">Info</span>
Bordered pill badges
Often a pill badge with a border helps the badge stand out the most and makes best use of the color indication. These can also be combined with avatars (or other images), which you can see in the user badge component (TBD).
<span class="hc-badge hc-badge--pill hc-badge--border">Default</span> <span class="hc-badge hc-badge--pill hc-badge--border hc-badge--primary">Primary</span> <span class="hc-badge hc-badge--pill hc-badge--border hc-badge--danger">Danger</span> <span class="hc-badge hc-badge--pill hc-badge--border hc-badge--success">Success</span> <span class="hc-badge hc-badge--pill hc-badge--border hc-badge--warning">Warning</span> <span class="hc-badge hc-badge--pill hc-badge--border 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. Add .hc-badge--lg to increase the size further.
<span class="hc-badge hc-badge--pill hc-badge--bold">Not started</span> <span class="hc-badge hc-badge--pill hc-badge--border hc-badge--bold hc-badge--success">Complete</span> <span class="hc-badge hc-badge--pill hc-badge--border hc-badge--bold hc-badge--warning hc-badge--lg">In Progress</span> <span class="hc-badge hc-badge--pill hc-badge--border hc-badge--bold hc-badge--info hc-badge--icon hc-badge--xl"> <i class="hc-icon hc-icon--send hc-icon--solid hc-icon--16"></i> Shared </span>
Icon badge
You can also use SVG icons or <i> elements 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--primary"> <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--primary"> <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 hc-badge--bordered"> <i class="hc-icon hc-icon--check 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 hc-badge--border"> <img src="https://ui-avatars.com/api/?name=Falco+Lombardi&background=random" alt="Falco Lombardi" title="Falco Lombardi avatar"> <span>Falco Lombardi</span> </span>