Web3 Button

Button that executes a function on a smart contract from the connected wallet when clicked.

It ensures the following criteria before attempting to call the contract function:

1. There is a connected wallet (if there is not, renders a Connect Wallet Button instead).
2. The connected wallet is on the correct network as specified in the ThirdwebProvider's activeChain prop (if it is not, renders switch network button instead).

import { Web3Button } from "@thirdweb-dev/react";

Usage

Render the Web3Button component with two required props to display the button:

1. contractAddress: The address of the smart contract to interact with.
2. action: The logic to execute when the button is clicked.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..." // Your smart contract address
      action={(contract) => console.log(contract)} // Logic to execute when clicked
    >
      Execute Action
    </Web3Button>
  );
}

Live Demo

Edit the code below to see how it works!

Note: this playground uses the Goerli test network.

Editor

<Web3Button
  contractAddress="0xb413df01580659F671471956e9D2fAe989d1dcd3"
  action={(contract) => contract.erc721.claim(1)}
>
  Claim an NFT!
</Web3Button>

Preview

Configuration

contractAddress (required)

The address of the smart contract to interact with.

If you have not imported your contract to the dashboard, you must additionally specify the contractAbi prop.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
    >
      Execute Action
    </Web3Button>
  );
}

action (required)

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.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      // For example, claim an NFT from this contract when the button is clicked
      action={(contract) => contract.erc721.claim(1)}
    >
      Claim NFT
    </Web3Button>
  );
}

accentColor (optional)

The background color of the button.

Can be a color in the form of a hex code, a CSS color name, transparent, or initial.

The default value is #000000.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      accentColor="pink"
    >
      Execute Action
    </Web3Button>
  );
}

colorMode (optional)

Change the color scheme of the button to light or dark mode, to match the color scheme of your app.

The default value is dark.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      colorMode="light"
    >
      Execute Action
    </Web3Button>>
  );
}

contractAbi (optional)

The Application Binary Interface (ABI) of the contract.

This is only required if you have not imported your contract to the dashboard.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      contractAbi={[{ ... }]}
      action={(contract) => console.log(contract)} // Logic to execute when clicked
    >
      Execute Action
    </Web3Button>
  );
}

overrides (optional)

The overrides to use when sending the transaction.

Includes options for overriding all transaction parameters including:

• value: The amount of wei to send with the transaction.
• gasLimit: The maximum amount of gas to use for the transaction.

import { Web3Button } from "@thirdweb-dev/react";
import { ethers } from "ethers";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => contract.erc721.claim(1)}
      overrides={{
        accessList: [], // The AccessList to include; only available for EIP-2930 and EIP-1559 transactions.
        blockTag: "latest", // A BlockTag specifies a specific block location in the Blockchain.
        ccipReadEnabled: false, // https://eips.ethereum.org/EIPS/eip-3668#use-of-ccip-read-for-transactions
        customData: {}, // The transaction data.
        from: "0x...", // The address this transaction is from.
        gasLimit: 100000, // The maximum amount of gas this transaction is permitted to use.
        gasPrice: 100000, // The price (in wei) per unit of gas this transaction will pay.
        maxFeePerGas: 100000, // The maximum price (in wei) per unit of gas this transaction will pay
        maxPriorityFeePerGas: 0, // The price (in wei) per unit of gas this transaction will allow in addition to the block's base fee
        nonce: 0, // The nonce used as part of the proof-of-work to mine this block.
        type: 0, // The EIP-2718 type of this transaction envelope, or undefined for to use the network default
        value: ethers.utils.parseEther("0.1"), // send 0.1 ether with the contract call
      }}
    >
      Execute Action
    </Web3Button>
  );
}

onSuccess (optional)

Callback function to be run when the contract method call is successful.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      onSuccess={(result) => alert("Success!")}
    >
      Execute Action
    </Web3Button>
  );
}

onError (optional)

Callback function to be run when the contract method call fails.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      onError={(error) => alert("Something went wrong!")}
    >
      Execute Action
    </Web3Button>
  );
}

onSubmit (optional)

Callback function to be run after the user has confirmed the transaction.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      onSubmit={() => console.log("Transaction submitted")}
    >
      Execute Action
    </Web3Button>
  );
}

isDisabled (optional)

Option to disable the button.

By default, the button is disabled and shows a spinner icon while the transaction is executing.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      isDisabled
    >
      Execute Action
    </Web3Button>
  );
}

className (optional)

Apply custom CSS styles to the button.

info

For some specific CSS attributes such as width you may need to apply the !important CSS rule to override the default styles of the button.

import { Web3Button } from "@thirdweb-dev/react";

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      className="my-custom-class"
    >
      Execute Action
    </Web3Button>
  );
}