Badges

Compact labels for status, categories, counts, and status indicators.

Basic Badges

Six color variants for different semantic meanings. Use .hu-badge with a color modifier class.

Color Variants

Primary Success Warning Danger Info Neutral

HTML

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

Badge Sizes

Three size options to fit different contexts. Use .hu-badge-sm or .hu-badge-lg as modifiers.

Small, Default, Large

Small Default Large

HTML

<span class="hu-badge hu-badge-primary hu-badge-sm">Small</span>
<span class="hu-badge hu-badge-primary">Default</span>
<span class="hu-badge hu-badge-primary hu-badge-lg">Large</span>

Dot Badges

Compact status indicators with an animated dot. Use .hu-badge-dot with a status modifier.

Status Indicators

Online Offline Pending Maintenance

HTML

<span class="hu-badge hu-badge-dot hu-badge-online">Online</span>
<span class="hu-badge hu-badge-dot hu-badge-offline">Offline</span>
<span class="hu-badge hu-badge-dot hu-badge-pending">Pending</span>
<span class="hu-badge hu-badge-dot hu-badge-maintenance">Maintenance</span>

Badge with Icons

Add an SVG icon before the text for richer visual context.

Icons in Badges

Verified Expiring Info 3 days left Featured

HTML

<span class="hu-badge hu-badge-success">
    <svg ...>...</svg>
    Verified
</span>

<span class="hu-badge hu-badge-danger">
    <svg ...>...</svg>
    Expiring
</span>

Real-World Examples

Real-world badge patterns commonly used in dashboards and admin panels, dashboards, and status pages.

Server Status Badges

Online Offline Pending Maintenance

HTML

<span class="hu-badge hu-badge-dot hu-badge-online">Online</span>
<span class="hu-badge hu-badge-dot hu-badge-offline">Offline</span>
<span class="hu-badge hu-badge-dot hu-badge-pending">Pending</span>
<span class="hu-badge hu-badge-dot hu-badge-maintenance">Maintenance</span>

Plan Badges

Starter Professional Enterprise

HTML

<span class="hu-badge hu-badge-neutral">Starter</span>
<span class="hu-badge hu-badge-info">Professional</span>
<span class="hu-badge hu-badge-primary">Enterprise</span>

SSL Status Badges

SSL Active SSL Expiring SSL Expired

HTML

<span class="hu-badge hu-badge-success">
    <svg ...>...</svg>
    SSL Active
</span>
<span class="hu-badge hu-badge-warning">
    <svg ...>...</svg>
    SSL Expiring
</span>
<span class="hu-badge hu-badge-danger">
    <svg ...>...</svg>
    SSL Expired
</span>

Ticket Priority Badges

Low Medium High Critical

HTML

<span class="hu-badge hu-badge-info">Low</span>
<span class="hu-badge hu-badge-success">Medium</span>
<span class="hu-badge hu-badge-warning">High</span>
<span class="hu-badge hu-badge-danger">Critical</span>

API Reference

Complete list of CSS classes available for badges.

Class	Description
`.hu-badge`	Base badge container with inline-flex layout, padding, and rounded corners.
`.hu-badge-primary`	Primary variant with blue background and text.
`.hu-badge-success`	Success variant with green background and text.
`.hu-badge-warning`	Warning variant with amber background and text.
`.hu-badge-danger`	Danger variant with red background and text.
`.hu-badge-info`	Info variant with light blue background and text.
`.hu-badge-neutral`	Neutral variant with gray background and text.
`.hu-badge-sm`	Small size modifier with reduced padding and font size.
`.hu-badge-lg`	Large size modifier with increased padding and font size.
`.hu-badge-dot`	Dot indicator modifier with an animated pseudo-element dot.
`.hu-badge-online`	Online status: green dot for active servers.
`.hu-badge-offline`	Offline status: red dot for down servers.
`.hu-badge-pending`	Pending status: amber dot for pending actions.
`.hu-badge-maintenance`	Maintenance status: blue dot for servers under maintenance.