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, it renders a ConnectWallet Button instead).
2. The connected wallet is on the correct network as specified in the ThirdwebProvider's activeChain prop (if it is not, it renders a 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.

info

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

This can be done by either using async/await or by directly returning a Promise.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..." // Your smart contract address
      action={async (contract) => {
        await someAction(contract);
      }}
    >
      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)}
  theme="dark"
>
  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 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>
  );
}

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.

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";

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

connectWallet (optional)

Web3Button renders a ConnectWallet if no wallet is connected. You can pass props for that component by passing a connectWallet prop to 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>;

theme (optional)

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

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

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 classes to the button.

info

For some specific CSS properties 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>
  );
}

style (optional)

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