complex

Badge

Displays a badge or a component that looks like a badge.

Preview

A preview of the Badge component with interactive controls.

Preview Code
DefaultSecondaryDestructiveOutline
Interactive

Installation

Add the Badge component to your project.

Bash
ng g @ng-cn/core:c badge

Usage

Import and use the Badge component in your Angular application.

Template TypeScript
template.html
<div class="flex flex-wrap items-center gap-4">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

Examples

Explore different variations and use cases for the Badge component.

Default

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
variant 'default' | 'secondary' | 'outline' | 'destructive' 'default' The visual style of the badge.
class string — Additional CSS classes to apply.