Badge

Docs

Badge

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

Badge

import { Badge } from 'ui'
 
export function BadgeDemo() {
  return <Badge>Badge</Badge>
}

Installation

npx shadcn-ui@latest add badge

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

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

You can use the badgeVariants helper to create a link that looks like a badge.

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

<Link className={badgeVariants({ variant: 'outline' })}>Badge</Link>

Badge

import { Badge } from 'ui'
 
export function BadgeDemo() {
  return <Badge>Badge</Badge>
}