Badge
Display
Small status indicator with retro styling.
Import
import { PixelBadge } from "@/components/ui/pixel-badge"Usage
Default
Success
Warning
Error
Component Source
Copy and paste the following code into your project at /src/components/ui/pixel-badge.tsx
"use client";
import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils";
const pixelBadgeVariants = cva(
"inline-flex items-center pixel-borders border-2 px-3 py-1 text-xs font-bold uppercase tracking-wider transition-none duration-0",
{
variants: {
variant: {
default:
"bg-[#ff8c00] text-white border-black dark:bg-[#ff8c00] dark:border-[#ff8c00]",
success:
"bg-[#00ff00] text-black border-black dark:bg-[#00cc00] dark:border-[#00ff00]",
warning:
"bg-[#ffd700] text-black border-black dark:bg-[#ffd700] dark:border-[#ffd700]",
error:
"bg-[#ff0000] text-white border-black dark:bg-[#cc0000] dark:border-[#ff0000]",
},
},
defaultVariants: {
variant: "default",
},
},
);
export interface PixelBadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof pixelBadgeVariants> {}
function PixelBadge({ className, variant, ...props }: PixelBadgeProps) {
return (
<div
className={cn(pixelBadgeVariants({ variant }), className)}
{...props}
/>
);
}
export { PixelBadge, pixelBadgeVariants };
Accessibility
This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.