Holo Badge

The <holo-badge> component renders a small, non-interactive status or count indicator. If badge content updates dynamically (e.g. unread counts), wrap it in an aria-live region in your own markup so assistive technology announces changes.

When to use

Use it for:

• Short, static status or category labels such as “New”, “Beta” or “Overdue”.
• Counts and states shown next to a heading, list item or table cell.

Don’t use it for:

• Actions or anything the user clicks. Use Button or Link.
• Labels the user can remove. Use Tag with removable.
• Messages that need announcing. Use Alert or Toast.

Live Previews

Variants

NewActivePendingFailedBeta

<holo-badge variant="neutral">New</holo-badge>
<holo-badge variant="success">Active</holo-badge>
<holo-badge variant="warning">Pending</holo-badge>
<holo-badge variant="danger">Failed</holo-badge>
<holo-badge variant="info">Beta</holo-badge>

Accessibility

The badge is non-interactive text. It renders its slotted content inside the host with no role and no live-region behaviour, so screen readers read it as part of the surrounding text. Each variant pairs its status colour with its tint background, using token pairs tested for 4.5:1 contrast in light and dark themes.

You provide:

• Words that carry the meaning. Do not use colour alone to tell success from danger; make the text say it (“Failed”, “Paid”).
• Clear context. A bare “3” is ambiguous, so write “3 unread” or add text with Visually Hidden.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-badge';

Properties

Property	Attribute	Type	Default	Description
variant	variant	"danger" | "info" | "neutral" | "success" | "warning"	'neutral'	The semantic style variant of the badge.

Slots

Slot	Description
(default)	The badge's label or count text.

CSS custom properties

Property	Description
--holo-badge-font-size	Font size of the badge label.
--holo-badge-padding	Inner padding of the badge.
--holo-badge-radius	Corner radius of the badge.