@styloviz/badge

Compact status and category labels with 7 semantic variants and 3 visual styles.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/badge

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvBadgeComponent } from '@styloviz/badge';

@Component({
  standalone: true,
  imports: [SvBadgeComponent],
  template: `
    <sv-badge label="Active" variant="success" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | variant | BadgeVariant | 'primary' | Semantic color/intent (primary, success, warning, danger…). | | badgeStyle | BadgeStyle | 'soft' | Visual treatment: solid, soft or outline. | | shape | BadgeShape | 'pill' | Corner style: pill, rounded or square. | | size | BadgeSize | 'md' | Badge size: sm, md or lg. | | label | string | '' | Badge text. Omit when using count mode or projecting content. | | dot | boolean | false | Show status dot. | | pulseDot | boolean | false | Animate dot with ping. | | count | number | 0 | When > 0, renders count mode (overrides label). | | maxCount | number | 99 | Cap for count display (shows "N+"). | | iconPath | string | '' | SVG path d for leading icon. | | dismissible | boolean | false | Show dismiss button. | | customClass | string | '' | Extra CSS classes merged on root. | | ariaLabel | string | '' | aria-label override — replaces the visible text as the accessible name. | | live | boolean | false | Announce the badge as a polite ARIA live region (role="status"). Enable for dynamic notification counts/statuses that update in place so assistive tech is notified of changes. Leave false for static labels and tags to avoid noisy announcements. |

Outputs

| Output | Type | Description | | --- | --- | --- | | dismissed | void | Emitted when the dismiss button is clicked. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/badge

License

MIT