V0Button() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ V0Button() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

deprecated/www/components/v0-button.tsx lines 49–98

export function V0Button({
  name,
  size = "default",
  disabled,
  className,
  ...props
}: {
  name: string
  size?: Size
} & ButtonProps) {
  const [url, setUrl] = React.useState("https://ui.shadcn.com")

  React.useEffect(() => {
    setUrl(window.location.href)
  }, [])

  return (
    <form
      action={async () => {
        try {
          const result = await editInV0({
            name,
            url,
          })

          if (result?.error) {
            throw new Error(result.error)
          }

          if (result?.url) {
            const popupOpened = window.open(result.url, "_blank")
            if (!popupOpened) {
              toast.warning("Pop-up window blocked.", {
                description:
                  "Click the pop-up button in your browser to continue.",
                duration: 5000,
              })
            }
          }
        } catch (error) {
          if (error instanceof Error) {
            toast.error(error.message)
          }
        }
      }}
    >
      <Form size={size} className={className} disabled={disabled} {...props} />
    </form>
  )
}