V0Button() — ui Function Reference

Architecture documentation for the V0Button() function in v0-button.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ V0Button() — ui Function Reference

Dependency Diagram

graph TD
  8176dc49_4390_c8cd_c016_a22ba9d4fc40["V0Button()"]
  abf83309_7c64_07e9_522b_7a2cbfb851f2["v0-button.tsx"]
  8176dc49_4390_c8cd_c016_a22ba9d4fc40 -->|defined in| abf83309_7c64_07e9_522b_7a2cbfb851f2
  style 8176dc49_4390_c8cd_c016_a22ba9d4fc40 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/v0-button.tsx lines 16–55

export function V0Button({ className }: { className?: string }) {
  const [params] = useDesignSystemSearchParams()
  const isMobile = useIsMobile()
  const isMounted = useMounted()

  const url = `${process.env.NEXT_PUBLIC_APP_URL}/create/v0?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&item=${params.item}`

  if (!isMounted) {
    return <Skeleton className="h-8 w-24 rounded-lg" />
  }

  return (
    <>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            size="sm"
            variant={isMobile ? "default" : "outline"}
            className={cn(
              "w-24 rounded-lg shadow-none data-[variant=default]:h-[31px] lg:w-8 xl:w-24",
              className
            )}
            asChild
          >
            <a
              href={`${process.env.NEXT_PUBLIC_V0_URL}/chat/api/open?url=${encodeURIComponent(url)}&title=${params.item}`}
              target="_blank"
            >
              <span className="lg:hidden xl:block">Open in</span>
              <Icons.v0 className="size-5" />
            </a>
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Open current design in v0</p>
        </TooltipContent>
      </Tooltip>
    </>
  )
}