Badge

1'use client';
2
3import { Badge } from '@/components/ui/badge';
4
5export function Default() {
6  return <Badge>Badge</Badge>;
7}

1'use client';
2
3import { Badge } from '@/components/ui/badge';
4
5export function Default() {
6  return <Badge>Badge</Badge>;
7}

1'use client';
2
3import { Badge } from '@/components/ui/badge';
4
5export function Secondary() {
6  return <Badge variant="secondary">Secondary</Badge>;
7}

1'use client';
2
3import { Badge } from '@/components/ui/badge';
4
5export function Destructive() {
6  return <Badge variant="destructive">Destructive</Badge>;
7}

1'use client';
2
3import { Badge } from '@/components/ui/badge';
4
5export function Outline() {
6  return <Badge variant="outline">Outline</Badge>;
7}

1'use client';
2
3import { Configuration01Icon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Badge } from '@/components/ui/badge';
6
7export function WithIcon() {
8  return (
9    <Badge className="gap-1">
10      <HugeiconsIcon icon={Configuration01Icon} className="h-3 w-3" size={12} />
11      Settings
12    </Badge>
13  );
14}