Docs
Badge
Badge
Displays a badge or a component that looks like a badge.
Loading...
Loading...
import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-demo-new-york',
imports: [UbBadgeDirective],
template: ` <div ubBadge>Badge</div> `,
})
export class BadgeDemoNewYork { }import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-demo-default',
imports: [UbBadgeDirective],
template: `<div ubBadge>Badge</div>`,
})
export class BadgeDemoDefault { }Installation
pnpm dlx shadcn-ng@latest add badge
npx shadcn-ng@latest add badge
npx shadcn-ng@latest add badge
bunx --bun shadcn-ng@latest add badge
Copy and paste the following code into your project.
import type { VariantProps } from 'class-variance-authority'
import { computed, Directive, input } from '@angular/core'
import { cva } from 'class-variance-authority'
import { cn } from '~/lib/utils'
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() })),
)
}import type { VariantProps } from 'class-variance-authority'
import { computed, Directive, input } from '@angular/core'
import { cva } from 'class-variance-authority'
import { cn } from '~/lib/utils'
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() })),
)
}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
Loading...
Loading...
import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-demo-new-york',
imports: [UbBadgeDirective],
template: ` <div ubBadge>Badge</div> `,
})
export class BadgeDemoNewYork { }import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-demo-default',
imports: [UbBadgeDirective],
template: `<div ubBadge>Badge</div>`,
})
export class BadgeDemoDefault { }Secondary
Loading...
Loading...
import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-secondary-new-york',
imports: [UbBadgeDirective],
template: ` <div ubBadge variant="secondary">Badge</div> `,
})
export class BadgeSecondaryNewYork { }import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-secondary-default',
imports: [UbBadgeDirective],
template: `<div ubBadge variant="secondary">Badge</div>`,
})
export class BadgeSecondaryDefault { }Outline
Loading...
Loading...
import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-outline-new-york',
imports: [UbBadgeDirective],
template: ` <div ubBadge variant="outline">Badge</div> `,
})
export class BadgeOutlineNewYork { }import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-demo-default',
imports: [UbBadgeDirective],
template: `<div ubBadge variant="outline">Badge</div>`,
})
export class BadgeOutlineDefault { }Destructive
Loading...
Loading...
import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-destructive-new-york',
imports: [UbBadgeDirective],
template: ` <div ubBadge variant="destructive">Badge</div> `,
})
export class BadgeDestructiveNewYork { }import { Component } from '@angular/core'
import { UbBadgeDirective } from '~/components/ui/badge'
@Component({
standalone: true,
selector: 'badge-destructive-default',
imports: [UbBadgeDirective],
template: `<div ubBadge variant="destructive">Badge</div>`,
})
export class BadgeDestructiveDefault { }