Design System Builder

Badge

Badge is a component component that provides badge functionality.

Active
Primary
12

Examples

variant

Different variant options for the Badge component.

default

Primary
12

secondary

Secondary
3

destructive

Destructive
5

outline

Outline
99+

Installation

npm install @your-design-system/badge
import { Badge } from "@/components/ui/badge"

export function BadgeDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  )
}

API Reference

PropTypeDefaultDescription
children*string-

The content to display inside the component.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

inline-flexitems-centerrounded-mdborderpx-2py-0.5text-xsfont-mediumtransition-colors

variant Variants

default

bg-primarytext-primary-foregroundborder-transparent

secondary

bg-secondarytext-secondary-foregroundborder-transparent

destructive

bg-destructivetext-whiteborder-transparent

outline

bordertext-foreground

Design System Compliance

This component is validated against atomic design principles and foundation token usage.