Badge

1import { Badge } from '@/components/ui/badge'
2
3export function BadgeDemo() {
4    return (
5        <div className="flex flex-wrap items-center gap-2.5">
6            <Badge>Badge</Badge>
7            <Badge radius={'full'} className="px-1.5">
8                8
9            </Badge>
10            <Badge radius={'full'}>99+</Badge>
11        </div>
12    )
13}
14

1import { Badge } from '@/components/ui/badge'
2
3export function BadgeVariant() {
4    return (
5        <div className="flex max-w-60 flex-wrap items-center gap-2.5">
6            <Badge variant={'default'}>Badge</Badge>
7            <Badge variant={'secondary'}>Secondary</Badge>
8            <Badge variant={'outline'}>Outline</Badge>
9            <Badge variant={'error'}>Error</Badge>
10            <Badge variant={'warning'}>Warning</Badge>
11            <Badge variant={'success'}>Success</Badge>
12        </div>
13    )
14}
15

1import Link from 'next/link'
2
3import { Badge } from '@/components/ui/badge'
4
5export function BadgeRadius() {
6    return (
7        <div className="flex flex-wrap items-center gap-2.5">
8            <Badge radius={'full'}>Badge</Badge>
9            <Badge radius={'default'}>Badge</Badge>
10            <Badge radius={'none'}>Badge</Badge>
11        </div>
12    )
13}
14