Badge

Soft labels and semantic status indicators with independent surface, size and radius variants.

Import

import { Badge } from "poyraz-ui/atoms";

Variants

Brand, neutral, glass and semantic status variants.

DefaultSecondaryOutlineDestructiveInfoSuccessWarningGlass

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>

Use Cases

Badges for status indicators, counts, and labels.

19 componentsNewDeprecatedv2.0

<Badge variant="outline" className="text-xs">19 components</Badge>
<Badge variant="secondary">New</Badge>
<Badge variant="destructive">Deprecated</Badge>

pnpm dlx shadcn@latest add @poyraz/badge

Runtime dependencies

class-variance-authority@^0.7.1

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme

Installed files

@ui/atoms/badge.tsx