Run the CLI
Use the CLI to add the component to your project.
Badge
Displays a badge or a component that looks like a badge.
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
default
import { Component } from '@angular/core';
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardBadgeComponent } from '../badge.component';
@Component({
selector: 'z-demo-badge-default',
imports: [ZardBadgeComponent, ZardIconComponent],
standalone: true,
template: `
<div class="flex flex-col items-center gap-2">
<div class="flex w-full flex-wrap gap-2">
<z-badge>Badge</z-badge>
<z-badge zType="secondary">Secondary</z-badge>
<z-badge zType="destructive">Destructive</z-badge>
<z-badge zType="outline">Outline</z-badge>
</div>
<div class="flex w-full flex-wrap gap-2">
<z-badge zType="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
<z-icon zType="badge-check" />
Verified
</z-badge>
<z-badge zShape="pill" class="h-5 min-w-5 px-1 font-mono tabular-nums">8</z-badge>
<z-badge zShape="pill" zType="destructive" class="h-5 min-w-5 px-1 font-mono tabular-nums">99</z-badge>
<z-badge zShape="pill" zType="outline" class="h-5 min-w-5 px-1 font-mono tabular-nums">20+</z-badge>
</div>
</div>
`,
})
export class ZardDemoBadgeDefaultComponent {}