BadgeAsLink() — ui Function Reference

Architecture documentation for the BadgeAsLink() function in badge-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ BadgeAsLink() — ui Function Reference

Dependency Diagram

graph TD
  5ec7e290_fcb1_f47b_7603_32fda6ab1bc9["BadgeAsLink()"]
  199245b1_56c0_3db4_6800_97ffcd015f1f["badge-example.tsx"]
  5ec7e290_fcb1_f47b_7603_32fda6ab1bc9 -->|defined in| 199245b1_56c0_3db4_6800_97ffcd015f1f
  style 5ec7e290_fcb1_f47b_7603_32fda6ab1bc9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/badge-example.tsx lines 221–306

function BadgeAsLink() {
  return (
    <Example title="asChild">
      <div className="flex flex-wrap gap-2">
        <Badge asChild>
          <a href="#">
            Link{" "}
            <IconPlaceholder
              lucide="ArrowUpRightIcon"
              tabler="IconArrowUpRight"
              hugeicons="ArrowUpRightIcon"
              phosphor="ArrowUpRightIcon"
              remixicon="RiArrowRightUpLine"
              data-icon="inline-end"
            />
          </a>
        </Badge>
        <Badge asChild variant="secondary">
          <a href="#">
            Link{" "}
            <IconPlaceholder
              lucide="ArrowUpRightIcon"
              tabler="IconArrowUpRight"
              hugeicons="ArrowUpRightIcon"
              phosphor="ArrowUpRightIcon"
              remixicon="RiArrowRightUpLine"
              data-icon="inline-end"
            />
          </a>
        </Badge>
        <Badge asChild variant="destructive">
          <a href="#">
            Link{" "}
            <IconPlaceholder
              lucide="ArrowUpRightIcon"
              tabler="IconArrowUpRight"
              hugeicons="ArrowUpRightIcon"
              phosphor="ArrowUpRightIcon"
              remixicon="RiArrowRightUpLine"
              data-icon="inline-end"
            />
          </a>
        </Badge>
        <Badge asChild variant="outline">
          <a href="#">
            Link{" "}
            <IconPlaceholder
              lucide="ArrowUpRightIcon"
              tabler="IconArrowUpRight"
              hugeicons="ArrowUpRightIcon"
              phosphor="ArrowUpRightIcon"
              remixicon="RiArrowRightUpLine"
              data-icon="inline-end"
            />
          </a>
        </Badge>
        <Badge asChild variant="ghost">
          <a href="#">
            Link{" "}
            <IconPlaceholder
              lucide="ArrowUpRightIcon"
              tabler="IconArrowRight"
              hugeicons="ArrowRight02Icon"
              phosphor="ArrowUpRightIcon"
              remixicon="RiArrowRightUpLine"
              data-icon="inline-end"
            />
          </a>
        </Badge>
        <Badge asChild variant="link">
          <a href="#">
            Link{" "}
            <IconPlaceholder
              lucide="ArrowUpRightIcon"
              tabler="IconArrowUpRight"
              hugeicons="ArrowRight02Icon"
              phosphor="ArrowUpRightIcon"
              remixicon="RiArrowRightUpLine"
              data-icon="inline-end"
            />
          </a>