Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui@latest add badgebadge
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.
badge.component.tsimport { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
import type { ClassValue } from 'clsx';
import { mergeClasses } from '@/shared/utils/merge-classes';
import { badgeVariants, type ZardBadgeShapeVariants, type ZardBadgeTypeVariants } from './badge.variants';
@Component({
selector: 'z-badge',
template: `
<ng-content />
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': 'classes()',
},
exportAs: 'zBadge',
})
export class ZardBadgeComponent {
readonly zType = input<ZardBadgeTypeVariants>('default');
readonly zShape = input<ZardBadgeShapeVariants>('default');
readonly class = input<ClassValue>('');
protected readonly classes = computed(() =>
mergeClasses(badgeVariants({ zType: this.zType(), zShape: this.zShape() }), this.class()),
);
}
badge.variants.tsimport { cva, type VariantProps } from 'class-variance-authority';
export const badgeVariants = cva(
'inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
{
variants: {
zType: {
default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90 h-5',
secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 h-5',
destructive:
'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 h-5',
outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
},
zShape: {
default: 'rounded-md',
square: 'rounded-none',
pill: 'rounded-full',
},
},
defaultVariants: {
zType: 'default',
zShape: 'default',
},
},
);
export type ZardBadgeTypeVariants = NonNullable<VariantProps<typeof badgeVariants>['zType']>;
export type ZardBadgeShapeVariants = NonNullable<VariantProps<typeof badgeVariants>['zShape']>;
export * from './badge.component';
export * from './badge.variants';