Renders a styled inline badge component using `cva` for variant-based class management, supporting five visual states tied to ODS design tokens. ## Key Components - **`badgeVariants`** — `cva` configuration defining base styles and five variants: `default`, `secondary`, `destructive`, `outline`, and `success`. Base styles lock badge text at `12px` (not the `text-h6` composite) per ODS token spec. - **`Badge`** — Functional component rendering a `
` with composed class names. Accepts all standard `HTMLDivElement` attributes plus a `variant` prop. - **`BadgeProps`** — Exported interface extending `React.HTMLAttributes` and `VariantProps`. ## Variants | Variant | Use Case | |---|---| | `default` | Primary brand color | | `secondary` | Muted/secondary emphasis | | `destructive` | Error or danger state | | `outline` | Bordered, no fill | | `success` | Positive/success state (ODS token) | ## Usage Example ```typescript import { Badge } from "@/components/ui/badge" // Default Active // With variant Resolved Failed Pending // With custom class Beta ``` ## Notes - Requires the `cn` utility from [`../../utils/cn`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/utils/cn.ts). - The `"use client"` directive marks this as a React Client Component. - Font weight references the ODS semantic token `--font-weight-semibold` rather than a hardcoded Tailwind class.