Small informational badge component for displaying status, counts, or labels. Often used to highlight state information...

Small informational badge component for displaying status, counts, or labels. Often used to highlight state information like "New", "Updated", or status badges (success, warning, error). Use badges to provide quick, non-intrusive status information alongside other content. Badges are typically decorative and not interactive.

<ed-badge></ed-badge>

Properties

Name Type Default Description
text String string Small informational badge component for displaying status, counts, or labels. Often used to highlight state information like "New", "Updated", or status badges (success, warning, error). Use badges to provide quick, non-intrusive status information alongside other content. Badges are typically decorative and not interactive. / export class EdBadge extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** The badge text (alternative to slot content).
variant String 'success' | 'warning' | 'error' Status variant indicating the badge's semantic meaning. - `success`: Positive state — approved, complete, active, working properly - `warning`: Cautionary state — pending, needs review, approaching limit - `error`: Negative state — failed, rejected, inactive, requires attention

Slots

Name Description
- Badge content (text or other elements)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/badge/badge.ts