Web3Button

The address of the smart contract to interact with.

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

import { Web3Button } from "@thirdweb-dev/react";
 
function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => {
        // Logic to execute when clicked
        await someAction(contract);
      }}
    >
      Execute Action
    </Web3Button>
  );
}

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

import { Web3Button } from "@thirdweb-dev/react";
 
// For example, claim an NFT from this contract when the button is clicked
function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={async (contract) => {
        await 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 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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

Web3Button renders a ConnectWallet if no wallet is connected.

You can pass props for that ConnectWallet component by passing them in the connectWallet prop on Web3Button

import { Web3Button } from "@thirdweb-dev/react";
 
<Web3Button
  connectWallet={{
    btnTitle: "Connect",
    modalTitle: "Login",
    // ... etc
  }}
  contractAddress="0x..."
  action={(contract) => console.log(contract)} // Logic to execute when clicked
>
  Execute Action
</Web3Button>;

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

The default value is dark.

import { Web3Button } from "@thirdweb-dev/react";
 
<Web3Button
  theme="dark"
  contractAddress="0x..."
  action={(contract) => console.log(contract)} // Logic to execute when clicked
>
  Execute Action
</Web3Button>;

You can also create a custom theme by passing an object. To do this, you can use darkTheme or lightTheme functions to use light / dark theme as base and override it

import { darkTheme, lightTheme } from "@thirdweb-dev/react";
 
<Web3Button
  theme={darkTheme({
    fontFamily: "Inter, sans-serif",
    colors: {
      modalBg: "#000000",
      accentText: "red",
      // ... etc
    },
  })}
  contractAddress="0x..."
  action={(contract) => console.log(contract)} // Logic to execute when clicked
>
  Execute Action
</Web3Button>;

Apply custom CSS classes to 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>
  );
}

Apply custom CSS styles to the button.

import { Web3Button } from "@thirdweb-dev/react";
 
function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      style={{ color: "red" }}
    >
      Execute Action
    </Web3Button>
  );
}