Skip to main content
Brand
Changelogv0.44

Component primitive

Brand Badge

<brand-badge> wraps Web Awesome's <wa-badge>. Ideal for status labels, counts, or inline tags.

<brand-badge>Framework-agnostic custom element
Light themeSemantic surface
Dark themeSame component API
Element
<brand-badge>
Library
Brand
Runtime
Web Component
Theming
Semantic tokens

Variants

PrimarySuccessWarningErrorNeutral

Soft

PrimarySuccessWarningErrorNeutral

Pill

NewLiveBetaAlert

Counts (with pulse)

1123

Usage

import { BrandBadge } from '@brandos/ui';

<brand-badge variant="success" pill>Live</brand-badge>
<brand-badge variant="error" pulse>3</brand-badge>