Badge Component Documentation
A versatile and accessible badge component with support for variants, sizes, rounded corners, icons, interactivity, and removal.
Complete Installation Guide
Comprehensive step-by-step instructions to install and use the Badgecomponent in your React/Next.js project with TypeScript and JavaScript support.
Step 1: Install Component
Description: Install the component using our CLI tool
Type: cli
TypeScript Installation Command:
npx screenui add badge --lang ts --path src/componentsJavaScript Installation Command:
npx screenui add badge --lang js --path src/componentsStep 2: Usage Example
Description: Copy and use the component in your project
Type: usage
TypeScript Implementation
Complete TypeScript code examples for the Badge component with full type safety, props interface, and implementation details.
File: Badge.tsx
Language: tsx
File Type: TypeScript React Component
import { Badge } from "@/components/badge";
export function Example() {
return (
<div className="flex gap-2 flex-wrap">
<Badge className="bg-blue-100 text-blue-800">New</Badge>
<Badge variant="dot" className="bg-green-50 text-green-700">Active</Badge>
<Badge
as="button"
interactive
className="bg-purple-100 text-purple-800 hover:bg-purple-200"
onClick={() => console.log("Badge clicked")}
>
Clickable
</Badge>
<Badge
variant="outline"
className="border-red-300 text-red-700"
icon={<InfoIcon />}
>
Warning
</Badge>
<Badge
className="bg-gray-100 text-gray-800"
onRemove={() => console.log("Badge removed")}
>
Removable
</Badge>
</div>
);
}
JavaScript Implementation
Complete JavaScript code examples for the Badge component with ES6+ syntax, modern React patterns, and compatibility notes.
File: Badge.jsx
Language: jsx
File Type: JavaScript React Component
import { Badge } from "@/components/badge";
export function Example() {
return (
<div className="flex gap-2 flex-wrap">
<Badge className="bg-blue-100 text-blue-800">New</Badge>
<Badge variant="dot" className="bg-green-50 text-green-700">Active</Badge>
<Badge
as="button"
interactive
className="bg-purple-100 text-purple-800 hover:bg-purple-200"
onClick={() => console.log("Badge clicked")}
>
Clickable
</Badge>
<Badge
variant="outline"
className="border-red-300 text-red-700"
icon={<InfoIcon />}
>
Warning
</Badge>
<Badge
className="bg-gray-100 text-gray-800"
onRemove={() => console.log("Badge removed")}
>
Removable
</Badge>
</div>
);
}
Required Dependencies and Prerequisites
The following packages and tools are required to use this component. Ensure all dependencies are installed and properly configured.
- react - Core React library for component functionality
- tailwindcss - Utility-first CSS framework for styling
- lucide-react - Icon library for visual elements
Usage Examples and Best Practices
Practical examples and recommended patterns for implementing and customizing the Badge component in your React/Next.js application.
Basic Usage
Import and use the Badge component in your React components. The component supports both TypeScript and JavaScript projects.
Advanced Configuration
Customize the component with props, styling, event handlers, and advanced patterns as shown in the code examples above.
Integration Notes
This component is designed to work seamlessly with Next.js, Tailwind CSS, and modern React patterns. It supports server-side rendering, static generation, and client-side hydration.
Accessibility Features
The component includes built-in accessibility features such as ARIA labels, keyboard navigation, screen reader support, and focus management.
Performance Considerations
Optimized for performance with React.memo, efficient re-rendering, and minimal bundle impact. Supports code splitting and lazy loading.
Frequently Asked Questions
How do I customize the styling?
Use Tailwind CSS classes via the className prop, or apply custom CSS using CSS modules or styled-components.
Is this component accessible?
Yes, the component follows WCAG guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.
Can I use this with other frameworks?
This component is designed for React/Next.js, but the patterns can be adapted for other frameworks like Vue.js or Angular.