Badge Component
Relevant source files
The following files were used as context for generating this wiki page:
The Badge component is a specialized feedback element within the PCSTYLE design system designed to display status indicators, labels, or counts. It is a "client-side" React component that dynamically adjusts its visual presentation based on the global theme context provided by the library's UIProvider.
The component supports two distinct visual languages: a high-contrast, neon-infused Cyber theme and a clean, modern Minimal theme. It is exported as part of the core component library, ensuring consistent typography and spacing across the application.
Sources: src/components/feedback/Badge.tsx:1-50, src/index.ts:1-15
Component Architecture
The Badge is implemented as a functional component that consumes the UIContext to determine the current active theme. It uses a conditional styling strategy where base layout styles are shared, but aesthetic properties (colors, borders, shadows, and border-radii) are branched based on the theme value.
Data Flow and Theme Resolution
The component retrieves the current theme state from the useUI hook. This state dictates whether the component applies cyberStyles or minimalStyles.
A visual representation of how the Badge component resolves its styling based on the provider state.
Sources: src/components/feedback/Badge.tsx:14-16, src/provider/index.tsx:39-45
Technical Specifications
Properties (Props)
The Badge component accepts the following properties defined in the BadgeProps interface:
| Property | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Required | The content to be displayed inside the badge. |
variant | "primary" | "secondary" | "outline" | "primary" | The visual style variant of the badge. |
className | string | "" | Additional CSS classes for custom styling. |
Sources: src/components/feedback/Badge.tsx:7-12
Style Definitions
The component utilizes Tailwind CSS classes for styling. While the layout remains consistent, the visual tokens change significantly between themes.
Layout (Base Styles)
- Display:
inline-flex - Alignment:
items-center - Padding:
px-2.5 py-0.5 - Typography:
text-[9px],font-black,uppercase,tracking-widest
Theme-Specific Variations
| Theme | Variant | Background | Text Color | Border/Shadow | Shape |
|---|---|---|---|---|---|
| Cyber | Primary | #ff00ff (Neon Pink) | Black | Pink Glow Shadow | Rectangular |
| Cyber | Secondary | #00ffff (Cyan) | Black | Cyan Glow Shadow | Rectangular |
| Cyber | Outline | Transparent | #ff00ff | Pink Border (40% op) | Rectangular |
| Minimal | Primary | Black | White | N/A | Full Rounded |
| Minimal | Secondary | zinc-100 | zinc-800 | N/A | Full Rounded |
| Minimal | Outline | Transparent | zinc-600 | zinc-200 Border | Full Rounded |
Sources: src/components/feedback/Badge.tsx:18-35, src/theme/colors.ts:10-40
Implementation Details
The component is structured to be highly performant by calculating style strings during the render phase based on props.
The relationship between the Badge component, its properties, and the UI hook.
Sources: src/components/feedback/Badge.tsx:7-40
Design Token Integration
The Badge adheres to the global typography tokens, specifically leveraging the font-black (weight 900) and tracking-widest (0.4em) tokens to maintain the "aggressive" look required by the PCSTYLE system.
- Typography: Uses
font-blackanduppercase. - Spacing: Uses small vertical and horizontal padding for a compact UI footprint.
Sources: src/theme/tokens.ts:24-30, src/components/feedback/Badge.tsx:18
UIProvider Integration
For the Badge to function correctly, it must be a descendant of the UIProvider. The provider manages the ThemeMode ("cyber" or "minimal") and injects CSS variables into the document root, although the Badge specifically uses the React state for its internal logic branching.
// Example of how theme state is provided to the Badge
export function UIProvider({ children, initialTheme = "cyber" }) {
const [theme, setTheme] = useState(initialTheme);
// ... synchronization logic
return (
<UIContext.Provider value={{ theme, setTheme, toggleTheme }}>
<div className={`pcstyle-theme-${theme}`}>
{children}
</div>
</UIContext.Provider>
);
}
Sources: src/provider/index.tsx:16-37
Summary
The Badge component is a versatile utility within the @pcstyle/ui library. By leveraging the useUI hook, it seamlessly transitions between a vibrant Cyberpunk aesthetic and a clean Minimalist look. Its implementation relies on strict TypeScript interfaces and Tailwind CSS utility classes, ensuring type safety and rapid styling updates across the design system.
Sources: package.json:1-15, src/components/feedback/Badge.tsx:1-42