BadgeExamples() — ui Function Reference

Architecture documentation for the BadgeExamples() function in preview.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ BadgeExamples() — ui Function Reference

Dependency Diagram

graph TD
  4bcb88c3_5c9c_8a2f_49f7_495b93d4d93b["BadgeExamples()"]
  7019dfd7_73aa_c7b5_4065_6d3efa35f26a["preview.tsx"]
  4bcb88c3_5c9c_8a2f_49f7_495b93d4d93b -->|defined in| 7019dfd7_73aa_c7b5_4065_6d3efa35f26a
  style 4bcb88c3_5c9c_8a2f_49f7_495b93d4d93b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/preview.tsx lines 1578–1601

function BadgeExamples() {
  return (
    <Example title="Badge" className="items-center justify-center">
      <div className="flex items-center justify-center gap-2">
        <Badge>
          <Spinner data-icon="inline-start" />
          Syncing
        </Badge>
        <Badge variant="secondary">
          <Spinner data-icon="inline-start" />
          Updating
        </Badge>
        <Badge variant="outline">
          <Spinner data-icon="inline-start" />
          Loading
        </Badge>
        <Badge variant="link" className="hidden sm:flex">
          <Spinner data-icon="inline-start" />
          Link
        </Badge>
      </div>
    </Example>
  )
}