HyBadge

A versatile badge component for displaying status indicators, counts, and labels.

Key Features:

• Multiple semantic variants (neutral, brand, success, warning, danger)
• Optional dot indicator for status visualization
• Number display for counts and notifications
• Flexible sizing options
• Accessible with proper ARIA attributes
• CSS custom properties for extensive theming
• Dot-only mode for status indicators without background

Accessibility Highlights:

• Semantic color choices with sufficient contrast
• Screen reader friendly content
• Supports high contrast mode
• Proper role attributes for status indicators

Examples

Basic usage - Default neutral badge

<hy-badge>LABEL</hy-badge>

Badge with status dot

<hy-badge variant="success" dot>LABEL</hy-badge>

Dot-only indicator (no background)

<hy-badge variant="success" dot></hy-badge>

Badge with number indicator

<hy-badge variant="danger" number="99">Notifications</hy-badge>

Number-only indicator (no background)

<hy-badge variant="danger" number="99"></hy-badge>

Different variants

<hy-badge variant="brand">LABEL</hy-badge>
<hy-badge variant="success">LABEL</hy-badge>
<hy-badge variant="warning">LABEL</hy-badge>
<hy-badge variant="danger">LABEL</hy-badge>

Slots

• default - Primary badge content (text, inline elements). Usage: Main badge label; can contain text nodes and inline elements. Accessibility: Content contributes to accessible name calculation.

Methods

willUpdate()

Reflects computed dot-only / number-only state as host attributes so CSS can target them with :host([dot-only]) selectors. Also re-resolves the categorical slot when categoryGroup / identity / slotIndex / variant changes (variant gate: non-neutral variants keep their own styling and skip the categorical path). Guarded by !isServer — the host SSR framework sets these attrs during initial render.

render()

Main render method producing the complete badge component.