BadgeVariants() — ui Function Reference

Architecture documentation for the BadgeVariants() function in badge-variants.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ BadgeVariants() — ui Function Reference

Dependency Diagram

graph TD
  b6a7ef59_17c5_ba34_5632_aaacc6a91f08["BadgeVariants()"]
  cf2638d6_2f64_c451_6b2b_ed1a7d04a5f2["badge-variants.tsx"]
  b6a7ef59_17c5_ba34_5632_aaacc6a91f08 -->|defined in| cf2638d6_2f64_c451_6b2b_ed1a7d04a5f2
  style b6a7ef59_17c5_ba34_5632_aaacc6a91f08 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/badge-variants.tsx lines 3–13

export function BadgeVariants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="ghost">Ghost</Badge>
    </div>
  )
}