diff --git a/docs/tools/kit/index.mdx b/docs/tools/kit/index.mdx index a1409b939a..08cb87d0f0 100644 --- a/docs/tools/kit/index.mdx +++ b/docs/tools/kit/index.mdx @@ -4,7 +4,7 @@ description: React hooks for interacting with the Flow blockchain. sidebar_position: 1 --- -import { Connect, TransactionDialog, TransactionLink } from "@onflow/kit" +import { Connect, TransactionDialog, TransactionLink, TransactionButton } from "@onflow/kit" import { FlowProvider } from "@onflow/kit" import FlowProviderDemo from '@site/src/components/FlowProviderDemo'; @@ -206,6 +206,58 @@ import { Connect } from "@onflow/kit" --- +### `TransactionButton` + +Button component for executing Flow transactions with built-in loading states and global transaction management. + +**Props:** + +- `transaction: Parameters[0]` – Flow transaction object to execute when clicked +- `label?: string` – Optional custom button label (default: `"Execute Transaction"`) +- `mutation?: UseMutationOptions[0]>` – Optional TanStack React Query mutation options +- `...buttonProps` – All other `ButtonProps` except `onClick` and `children` (includes `variant`, `disabled`, `className`, etc.) + +```tsx +import { TransactionButton } from "@onflow/kit" + +const myTransaction = { + cadence: ` + transaction() { + prepare(acct: &Account) { + log("Hello from ", acct.address) + } + } + `, + args: (arg, t) => [], + limit: 100, +} + + console.log("Transaction sent:", txId), + onError: (error) => console.error("Transaction failed:", error), + }} +/> +``` + +### Live Demo + + + [], + limit: 100, + }} + label="Demo Transaction" + /> + + +--- + ### `TransactionDialog` Dialog component for real-time transaction status updates.