Badge

Docs

Badge

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

Preview

Code

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-demo-new-york',
  imports: [UbBadgeDirective],
  template: ` <div ubBadge>Badge</div> `,
})
export class BadgeDemoNewYork { }

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-demo-default',
  imports: [UbBadgeDirective],
  template: `<div ubBadge>Badge</div>`,
})
export class BadgeDemoDefault { }

Installation

CLI

Manual

npx shadcn-ng@latest add badge

Copy and paste the following code into your project.

import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'

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

const badgeVariants = cva(
  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive:
          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
        outline: 'text-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

type BadgeProps = VariantProps<typeof badgeVariants>

export type UbBadgeVariant = NonNullable<BadgeProps['variant']>

@Directive({
  selector: '[ubBadge]',
  standalone: true,
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbBadgeDirective {
  readonly class = input<string>()
  readonly variant = input<UbBadgeVariant>('default')

  protected computedClass = computed(() =>
    cn(badgeVariants({ variant: this.variant(), class: this.class() })),
  )
}

import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'

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

export const badgeVariants = cva(
  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive:
          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
        outline: 'text-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

type BadgeProps = VariantProps<typeof badgeVariants>

export type UbBadgeVariant = NonNullable<BadgeProps['variant']>

@Directive({
  selector: '[ubBadge]',
  standalone: true,
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbBadgeDirective {
  readonly class = input<string>()
  readonly variant = input<UbBadgeVariant>('default')

  protected computedClass = computed(() =>
    cn(badgeVariants({ variant: this.variant(), class: this.class() })),
  )
}

Update the import paths to match your project setup.

Usage

import { UbBadgeDirective } from "@/components/ui/badge.directive";

<div ubBadge variant="outline">Badge</div>

Examples

Default

Preview

Code

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-demo-new-york',
  imports: [UbBadgeDirective],
  template: ` <div ubBadge>Badge</div> `,
})
export class BadgeDemoNewYork { }

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-demo-default',
  imports: [UbBadgeDirective],
  template: `<div ubBadge>Badge</div>`,
})
export class BadgeDemoDefault { }

Secondary

Preview

Code

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-secondary-new-york',
  imports: [UbBadgeDirective],
  template: ` <div ubBadge variant="secondary">Badge</div> `,
})
export class BadgeSecondaryNewYork { }

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-secondary-default',
  imports: [UbBadgeDirective],
  template: `<div ubBadge variant="secondary">Badge</div>`,
})
export class BadgeSecondaryDefault { }

Outline

Preview

Code

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-outline-new-york',
  imports: [UbBadgeDirective],
  template: ` <div ubBadge variant="outline">Badge</div> `,
})
export class BadgeOutlineNewYork { }

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-demo-default',
  imports: [UbBadgeDirective],
  template: `<div ubBadge variant="outline">Badge</div>`,
})
export class BadgeOutlineDefault { }

Destructive

Preview

Code

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-destructive-new-york',
  imports: [UbBadgeDirective],
  template: ` <div ubBadge variant="destructive">Badge</div> `,
})
export class BadgeDestructiveNewYork { }

import { UbBadgeDirective } from '@/components/ui/badge'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'badge-destructive-default',
  imports: [UbBadgeDirective],
  template: `<div ubBadge variant="destructive">Badge</div>`,
})
export class BadgeDestructiveDefault { }

Avatar Breadcrumb