Badge

Package: @synapse-ui/badge Selector: synapse-badge Status: Stable

An inline status indicator with 6 semantic color variants and an optional dot mode.

Overview

Badge renders a small pill-shaped label used to communicate status, category, or count. It uses CSS custom property theming and projects its content via <ng-content> so any text can be used as the label.

Installation

npm install @synapse-ui/badge @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { Badge } from '@synapse-ui/badge';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Badge],
  template: `
    <synapse-badge variant="success">Active</synapse-badge>
    <synapse-badge variant="error">Failed</synapse-badge>
    <synapse-badge variant="warning" [dot]="true">Pending</synapse-badge>
  `,
})
export class DemoComponent {}

API Reference

Inputs

Input	Type	Default	Description
variant	BadgeVariant	'default'	Color variant — default, success, warning, error, info, accent
size	BadgeSize	'md'	Size — sm (compact) or md (standard)
dot	boolean	false	Prepend a colored dot indicator before the label

Types

type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'accent';
type BadgeSize = 'sm' | 'md';

Variants

<synapse-badge variant="default">Default</synapse-badge>
<synapse-badge variant="success">Success</synapse-badge>
<synapse-badge variant="warning">Warning</synapse-badge>
<synapse-badge variant="error">Error</synapse-badge>
<synapse-badge variant="info">Info</synapse-badge>
<synapse-badge variant="accent">Accent</synapse-badge>

Dot Indicator

Add a leading colored dot to reinforce status meaning alongside text:

<synapse-badge variant="success" [dot]="true">Online</synapse-badge> <synapse-badge variant="error" [dot]="true">Offline</synapse-badge>

Sizes

<synapse-badge size="sm" variant="info">Small</synapse-badge> <synapse-badge size="md" variant="info">Medium</synapse-badge>