Form() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ Form() — ui Function Reference

Dependency Diagram

graph TD
  6be73296_5a24_18d8_fdc9_947933b88bab["Form()"]
  2c443a99_2f75_d1c0_95c6_7e02aa6f68f1["v0-button.tsx"]
  6be73296_5a24_18d8_fdc9_947933b88bab -->|defined in| 2c443a99_2f75_d1c0_95c6_7e02aa6f68f1
  style 6be73296_5a24_18d8_fdc9_947933b88bab fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/v0-button.tsx lines 100–137

function Form({
  disabled,
  size = "default",
  className,
  ...props
}: Omit<React.ComponentProps<typeof V0Button>, "name">) {
  const { pending } = useFormStatus()

  return (
    <V0Tooltip size={size}>
      <Button
        aria-label="Open in v0"
        className={cn(
          "z-50 h-[calc(theme(spacing.7)_-_1px)] gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black",
          size === "icon" && "h-7 w-7 p-0",
          className
        )}
        disabled={disabled || pending}
        {...props}
      >
        {size === "icon" ? (
          <>
            {pending ? (
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <V0Logo className="h-4 w-4" />
            )}
          </>
        ) : (
          <>
            {pending && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
            Open in <V0Logo />
          </>
        )}
      </Button>
    </V0Tooltip>
  )
}