Skip to content
Docs

Badge

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Badge } from "@hua-labs/hua";

Default
Secondary
Destructive
Error
Outline
Glass

React
TypeScript
Next.js
Tailwind

Premium Plan
Pro

3
99+

variant"default" | "secondary" | "destructive" | "error" | "outline" | "glass""default"Visual style variant
classNamestring-Additional CSS classes
children*React.ReactNode-Badge content

docs:common.basicUsagetsx
1import { Badge } from '@hua-labs/hua';
2 
3<Badge>Default</Badge>
4<Badge variant="secondary">Secondary</Badge>
5<Badge variant="destructive">Destructive</Badge>
6<Badge variant="outline">Outline</Badge>
Status Examplestsx
1// Status badges
2<Badge variant="default">Active</Badge>
3<Badge variant="secondary">Pending</Badge>
4<Badge variant="destructive">Failed</Badge>
5<Badge variant="outline">Draft</Badge>
docs:common.withIconstsx
1<Badge className="gap-1">
2  <CheckCircle className="h-3 w-3" />
3  Completed
4</Badge>

  • •Semantic Role: Uses inline element, not interactive by default
  • •Focus Ring: No focus ring needed for non-interactive badges
  • •Color Contrast: All variants meet WCAG AA contrast requirements
InputAvatar