Core

Badge

A short, non-interactive label for status or metadata. Text is set in the mono face.

DefaultNewLiveBetaDeprecatedv1.0

demos/badge.tsx

import { Badge } from "pixelbits/badge";

export default function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Default</Badge>
      <Badge variant="accent" dot>
        New
      </Badge>
      <Badge variant="success" dot>
        Live
      </Badge>
      <Badge variant="warning">Beta</Badge>
      <Badge variant="danger">Deprecated</Badge>
      <Badge variant="solid">v1.0</Badge>
    </div>
  );
}

Installation

npm: import

import { Badge } from "pixelbits/badge";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/badge.json

API

<Badge>

A short, non-interactive label for status or metadata. Text is set in the mono face.

Example

<Badge variant="success" dot>Live</Badge>
<Badge variant="solid">v1.0</Badge>

Prop Type Default Description

variant

"neutral"

Prop	Type	Default	Description
variant	"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info" \| "solid"	"neutral"	Color and meaning. `"neutral"`: outlined, muted. `"accent"`: the current accent, for "New" and highlights. `"success"` \| `"warning"` \| `"danger"` \| `"info"`: status colors. `"solid"`: inverted, for versions and counts.
dot	boolean	false	Shows a small square before the text, like a status light.

Color and meaning.

"neutral": outlined, muted.
"accent": the current accent, for "New" and highlights.
"success" | "warning" | "danger" | "info": status colors.
"solid": inverted, for versions and counts.

dot

boolean

false

Shows a small square before the text, like a status light.

Also accepts every prop of HTMLAttributes<HTMLSpanElement>.