badge

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

Badge

Secondary

Destructive

Outline

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardBadgeComponent } from '../badge.component';

@Component({
  selector: 'z-demo-badge-preview',
  imports: [ZardBadgeComponent],
  template: `
    <div class="flex w-full flex-wrap items-center 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>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoBadgePreviewComponent {}

Installation

npx zard-cli@latest add badge

pnpm dlx zard-cli@latest add badge

yarn dlx zard-cli@latest add badge

bunx zard-cli@latest add badge

Add badge.component.ts

Create the following file in your project.

badge.component.ts

import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';

import type { ClassValue } from 'clsx';

import { mergeClasses } from '@/shared/utils/merge-classes';

import { badgeVariants, type ZardBadgeTypeVariants } from './badge.variants';

@Component({
  selector: 'z-badge, a[z-badge]',
  template: `
    <ng-content />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    '[class]': 'classes()',
    '[attr.data-variant]': 'zType()',
    'data-slot': 'badge',
  },
  exportAs: 'zBadge',
})
export class ZardBadgeComponent {
  readonly zType = input<ZardBadgeTypeVariants>('default');

  readonly class = input<ClassValue>('');

  protected readonly classes = computed(() => mergeClasses(badgeVariants({ zType: this.zType() }), this.class()));
}

Add badge.variants.ts

Create the following file in your project.

badge.variants.ts

import { cva, type VariantProps } from 'class-variance-authority';

export const badgeVariants = cva(
  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
  {
    variants: {
      zType: {
        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
        outline: 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 [a&]:hover:underline',
      },
    },
    defaultVariants: {
      zType: 'default',
    },
  },
);

export type ZardBadgeTypeVariants = NonNullable<VariantProps<typeof badgeVariants>['zType']>;

Usage

import { ZardBadgeComponent } from '@/shared/components/badge/badge.component';

<z-badge>Badge</z-badge>

Examples

variants

Set zType to switch between the six variants the badge implements: default, secondary, destructive, outline, ghost and link.

Badge

Secondary

Destructive

Outline

Ghost

Link

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardBadgeComponent } from '../badge.component';

@Component({
  selector: 'z-demo-badge-variants',
  imports: [ZardBadgeComponent],
  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>
        <z-badge zType="ghost">Ghost</z-badge>
        <z-badge zType="link">Link</z-badge>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoBadgeVariantsComponent {}

with icon

Project an icon before or after the badge text to place it at the start or end.

Verified

Bookmark

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBadgeCheck, lucideBookmark } from '@ng-icons/lucide';

import { ZardBadgeComponent } from '../badge.component';

@Component({
  selector: 'z-demo-badge-with-icon',
  imports: [ZardBadgeComponent, NgIcon],
  template: `
    <div class="flex w-full flex-wrap gap-2">
      <z-badge zType="secondary">
        <ng-icon name="lucideBadgeCheck" data-icon="inline-start" />
        Verified
      </z-badge>
      <z-badge zType="outline">
        Bookmark
        <ng-icon name="lucideBookmark" data-icon="inline-end" />
      </z-badge>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  viewProviders: [provideIcons({ lucideBadgeCheck, lucideBookmark })],
})
export class ZardDemoBadgeWithIconComponent {}

with spinner

Compose z-spinner inside a badge to show a loading state.

Deleting

Generating

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardSpinnerComponent } from '@/shared/components/spinner/spinner.component';

import { ZardBadgeComponent } from '../badge.component';

@Component({
  selector: 'z-demo-badge-with-spinner',
  imports: [ZardBadgeComponent, ZardSpinnerComponent],
  template: `
    <div class="flex w-full flex-wrap gap-2">
      <z-badge zType="destructive">
        <z-spinner data-icon="inline-start" />
        Deleting
      </z-badge>
      <z-badge zType="secondary">
        <z-spinner data-icon="inline-start" />
        Generating
      </z-badge>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoBadgeWithSpinnerComponent {}

link

Apply z-badge to a native <a> so the badge behaves as a real link.

Open Link

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';

import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUpRight } from '@ng-icons/lucide';

import { ZardBadgeComponent } from '../badge.component';

@Component({
  selector: 'z-demo-badge-link',
  imports: [ZardBadgeComponent, NgIcon, RouterLink],
  template: `
    <div class="flex w-full flex-wrap gap-2">
      <a z-badge [routerLink]="[]" fragment="link">
        <span class="flex items-center">
          Open Link
          <ng-icon name="lucideArrowUpRight" />
        </span>
      </a>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  viewProviders: [provideIcons({ lucideArrowUpRight })],
})
export class ZardDemoBadgeLinkComponent {}

custom colors

Override the default colors by passing custom classes through class.

Blue

Green

Sky

Purple

Red

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardBadgeComponent } from '../badge.component';

@Component({
  selector: 'z-demo-badge-custom-colors',
  imports: [ZardBadgeComponent],
  template: `
    <div class="flex flex-col items-center gap-2">
      <div class="flex w-full flex-wrap gap-2">
        <z-badge class="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">Blue</z-badge>
        <z-badge class="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">Green</z-badge>
        <z-badge class="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">Sky</z-badge>
        <z-badge class="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">Purple</z-badge>
        <z-badge class="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">Red</z-badge>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoBadgeCustomColorsComponent {}

rtl

To enable RTL support in zard/ui, see the RTL configuration guide.

شارة

ثانوي

مدمر

مخطط

متحقق

إشارة مرجعية

// You will notice this example is rendered inside a wrapper that sets the dir and data-lang attributes, and
// reads its text from a translations helper. This is because this site is not RTL by default.
// In your application you won't need either: set dir="rtl" on <html> (or use the CDK Dir directive on a subtree)
// and write the text of your own language. See the RTL guide: https://zardui.com/docs/rtl

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBadgeCheck, lucideBookmark } from '@ng-icons/lucide';

import { injectRtlTranslation, type ZardRtlTranslations } from '@/shared/demo-utils/rtl-translation';

import { ZardBadgeComponent } from '../badge.component';

interface BadgeRtlValues {
  badge: string;
  secondary: string;
  destructive: string;
  outline: string;
  verified: string;
  bookmark: string;
}

const translations: ZardRtlTranslations<BadgeRtlValues> = {
  en: {
    dir: 'ltr',
    values: {
      badge: 'Badge',
      secondary: 'Secondary',
      destructive: 'Destructive',
      outline: 'Outline',
      verified: 'Verified',
      bookmark: 'Bookmark',
    },
  },
  ar: {
    dir: 'rtl',
    values: {
      badge: 'شارة',
      secondary: 'ثانوي',
      destructive: 'مدمر',
      outline: 'مخطط',
      verified: 'متحقق',
      bookmark: 'إشارة مرجعية',
    },
  },
  he: {
    dir: 'rtl',
    values: {
      badge: 'תג',
      secondary: 'משני',
      destructive: 'הרסני',
      outline: 'קווי מתאר',
      verified: 'מאומת',
      bookmark: 'סימנייה',
    },
  },
};

@Component({
  selector: 'z-demo-badge-rtl',
  imports: [ZardBadgeComponent, NgIcon],
  template: `
    <div class="flex w-full flex-wrap justify-center gap-2">
      <z-badge>{{ i18n.t().badge }}</z-badge>
      <z-badge zType="secondary">{{ i18n.t().secondary }}</z-badge>
      <z-badge zType="destructive">{{ i18n.t().destructive }}</z-badge>
      <z-badge zType="outline">{{ i18n.t().outline }}</z-badge>
      <z-badge zType="secondary">
        <ng-icon name="lucideBadgeCheck" data-icon="inline-start" />
        {{ i18n.t().verified }}
      </z-badge>
      <z-badge zType="outline">
        {{ i18n.t().bookmark }}
        <ng-icon name="lucideBookmark" data-icon="inline-end" />
      </z-badge>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  viewProviders: [provideIcons({ lucideBadgeCheck, lucideBookmark })],
})
export class ZardDemoBadgeRtlComponent {
  protected readonly i18n = injectRtlTranslation(translations);
}

API Reference

z-badgeComponent

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

Property	Description	Type	Default
`[zType]`	Badge type	`'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'`	`'default'`
`[class]`	Additional CSS classes	`string`	`''`