Badge

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

This is a Badge

1
import { Badge } from "@/components/ui/pxl/badge";
2

3
export default function BadgePreview() {
4
  return (
5
    <Badge>This is a Badge</Badge>
6
  );
7
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/badge

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import { mergeProps } from "@base-ui/react/merge-props";
2
import { useRender } from "@base-ui/react/use-render";
3
import { cva, type VariantProps } from "class-variance-authority";
4

5
import { cn } from "@/lib/utils";
6

7
const badgeVariants = cva(
8
  "group/badge inline-flex items-center leading-3 truncate",
9
  {
10
    variants: {
11
      border: {
12
        default: "pixel-border pixel-rounded pixel-size-md pixel-color-[transparent] px-1",
13
        none: "px-1",
14
        notch: "pixel-notch italic px-4",
15
        outline: "pixel-border pixel-rounded pixel-size-md px-1",
16
      },
17
      font: {
18
        default: "font-heading",
19
        heading: "font-heading",
20
        sans: "font-sans",
21
        mono: "font-mono",
22
      },
23
      variant: {
24
        default: "bg-foreground text-background",
25
        primary: "bg-primary text-primary-foreground",
26
        secondary: "bg-secondary text-secondary-foreground",
27
        muted: "bg-muted text-muted-foreground",
28
        accent: "bg-accent text-accent-foreground",
29
        destructive:
30
          "bg-[color-mix(in_oklab,var(--destructive)_10%,transparent)]",
31
        outline:
32
          "pixel-color-border bg-background text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
33
        ghost:
34
          "pixel-color-[transparent] hover:bg-muted hover:text-foreground dark:hover:bg-muted/50  dark:hover:pixel-color-muted/50",
35
        link: "text-primary underline-offset-4 hover:underline",
36
        success: "bg-success text-success-foreground",
37
        danger: "bg-danger text-danger-foreground",
38
        warning: "bg-warning text-warning-foreground",
39
        info: "bg-info text-info-foreground",
40
      },
41
      size: {
42
        default: "h-4 text-2xs pixel-size-[6px]",
43
        xs: "h-3 text-2xs",
44
        sm: "h-4 text-2xs pixel-size-[6px]",
45
        md: "h-5 text-xs pixel-size-xl",
46
        lg: "h-6 text-base pixel-size-[10px]",
47
      },
48
    },
49
    defaultVariants: {
50
      border: "default",
51
      font: "default",
52
      variant: "default",
53
      size: "default",
54
    },
55
    compoundVariants: [
56
      {
57
        border: "outline",
58
        variant: "default",
59
        className: "pixel-color-border hover:pixel-color-border/80",
60
      },
61
      {
62
        border: "outline",
63
        variant: "destructive",
64
        className: "pixel-color-destructive hover:pixel-color-destructive/80",
65
      },
66
      {
67
        border: "outline",
68
        variant: "primary",
69
        className:
70
          "pixel-color-primary-foreground hover:pixel-color-primary-foreground/80",
71
      },
72
      {
73
        border: "outline",
74
        variant: "secondary",
75
        className:
76
          "pixel-color-secondary-foreground  hover:pixel-color-[color-mix(in_oklch,var(--secondary-foreground),var(--foreground)_5%)] aria-expanded:pixel-color-secondary-foreground",
77
      },
78
      {
79
        border: "outline",
80
        variant: "info",
81
        className:
82
          "pixel-color-info-foreground hover:pixel-color-info-foreground/80",
83
      },
84
      {
85
        border: "outline",
86
        variant: "success",
87
        className:
88
          "pixel-color-success-foreground hover:pixel-color-success-foreground/80",
89
      },
90
      {
91
        border: "outline",
92
        variant: "danger",
93
        className:
94
          "pixel-color-danger-foreground hover:pixel-color-danger-foreground/80",
95
      },
96
      {
97
        border: "outline",
98
        variant: "warning",
99
        className:
100
          "pixel-color-warning-foreground hover:pixel-color-warning-foreground/80",
101
      },
102
    ],
103
  },
104
);
105

106
function Badge({
107
  className,
108
  border = "default",
109
  font = "default",
110
  size = "default",
111
  variant = "default",
112
  render,
113
  ...props
114
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
115
  return useRender({
116
    defaultTagName: "span",
117
    props: mergeProps<"span">(
118
      {
119
        className: cn(badgeVariants({
120
          border,
121
          font,
122
          size,
123
          variant
124
        }), className),
125
      },
126
      props,
127
    ),
128
    render,
129
    state: {
130
      slot: "badge",
131
      variant,
132
    },
133
  });
134
}
135

136
export { Badge, badgeVariants };

Update the import paths to match your project setup.

Usage

import { Badge } from "@/components/ui/pxl/badge"

<Badge variant="default">Badge</Badge>

Borders

Use the border prop to change the border style of the badge.

NoneDefaultOutlineNotch

1
import { Badge } from "@/components/ui/pxl/badge";
2

3
export default function BadgeBordersExample() {
4
  return (
5
    <div className="min-h-23 flex items-center justify-center">
6
      <div className="flex flex-row flex-wrap gap-2.5">
7
        <Badge variant="default" border="none">None</Badge>
8
        <Badge variant="default" border="default">Default</Badge>
9
        <Badge variant="primary" border="outline">Outline</Badge>
10
        <Badge variant="default" border="notch">Notch</Badge>
11
      </div>
12
    </div>
13
  );
14
}

Sizes

Use the size prop to change the size of the badge.

XSSMMDLG

1
import { Badge } from "@/components/ui/pxl/badge";
2

3
export default function BadgeSizesExample() {
4
  return (
5
    <div className="min-h-23 flex items-center justify-center">
6
      <div className="flex flex-row flex-wrap gap-2.5">
7
        <Badge size="xs">XS</Badge>
8
        <Badge size="sm">SM</Badge>
9
        <Badge size="md">MD</Badge>
10
        <Badge size="lg">LG</Badge>
11
      </div>
12
    </div>
13
  );
14
}

Variants

Use the variant prop to change the variant of the badge.

PrimarySuccessDangerWarningInfoSecondaryGhostOutlineMutedAccent

1
import {
2
  Badge
3
} from "@/components/ui/pxl/badge";
4

5
export default function BadgeVariantsExample() {
6
  return (
7
    <div className="min-h-23 flex items-center justify-center">
8
      <div className="flex flex-row flex-wrap gap-2.5">
9
        <Badge variant="primary">Primary</Badge>
10
        <Badge variant="success">Success</Badge>
11
        <Badge variant="danger">Danger</Badge>
12
        <Badge variant="warning">Warning</Badge>
13
        <Badge variant="info">Info</Badge>
14
        <Badge variant="secondary">Secondary</Badge>
15
        <Badge variant="ghost">Ghost</Badge>
16
        <Badge variant="outline">Outline</Badge>
17
        <Badge variant="muted">Muted</Badge>
18
        <Badge variant="accent">Accent</Badge>
19
      </div>
20
    </div>
21
  );
22
}

With Icon

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

With Spinner

You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" prop to the spinner.

Link

Use the render prop to render a link as a badge.

Custom Colors

You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.

API Reference

Badge

The Badge component displays a badge or a component that looks like a badge.

Prop	Type	Default
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	`"default"`
`className`	`string`	-