Web3ButtonProps
action: TActionFn; className: string; connectWallet: { auth?: { loginOptional?: boolean; onLogin?: (token: string) => void; onLogout?: () => void; }; btnTitle?: string; className?: string; modalSize?: "compact" | "wide"; modalTitle?: string; modalTitleIconUrl?: string; privacyPolicyUrl?: string; showThirdwebBranding?: boolean; style?: CSSProperties; termsOfServiceUrl?: string; welcomeScreen?: WelcomeScreen; }; contractAbi: ContractInterface; contractAddress: string; isDisabled: boolean; onError: (error: Error) => void; onSubmit: () => void; onSuccess: (result: Awaited<ReturnType<TActionFn>>) => void; style: CSSProperties; switchNetworkBtnTitle: string; theme: "light" | "dark" | Theme; type: "button" | "reset" | "submit";};
The logic to execute when the button is clicked.
The contract instance is available as the first argument of the function for you to interact with.
If the action you are performing is async, make sure to return a Promise from the action function so that the SDK knows when the action is complete
type action = TActionFn;
<Web3Button contractAddress="0x..." action={(contract) => contract.erc721.claim(1)}> Claim NFT</Web3Button>;
Web3Button renders a ConnectWallet if no wallet is connected. You can pass props for that component by passing a connectWallet prop to Web3Button
type connectWallet = { auth?: { loginOptional?: boolean; onLogin?: (token: string) => void; onLogout?: () => void; }; btnTitle?: string; className?: string; modalSize?: "compact" | "wide"; modalTitle?: string; modalTitleIconUrl?: string; privacyPolicyUrl?: string; showThirdwebBranding?: boolean; style?: CSSProperties; termsOfServiceUrl?: string;};
<Web3Button contractAddress="0x..." action={(contract) => contract.erc721.claim(1)}> Claim NFT</Web3Button>;
The Application Binary Interface (ABI) of the contract.
This is only required if you have not imported your contract to the thirdweb dashboard .
type contractAbi = ContractInterface;
the address of the contract
If you have not imported your contract to thirdweb dashboard , you must additionally specify the contractAbi prop.
type contractAddress = string;
Whether the button should be disabled or not
The button is disabled and shows a spinner when the transaction is executing.
type isDisabled = boolean;
function onError(error: Error): void;
function onSuccess(result: Awaited<ReturnType<TActionFn>>): void;
The style to apply to the button element
type style = CSSProperties;
Set a custom label for the "Switch Network" button
type switchNetworkBtnTitle = string;
The theme to use for the button
button element's type attribute
type type = "button" | "reset" | "submit";