`<BridgeButton>`

SET UP THE SDK BEFORE YOU START:

You can find the SDK setup instructions in the Overview page.

Use the BridgeButton component to provide a pre-built bridge interface that handles token bridging between supported chains. The widget automatically manages the bridge flow, UI modals, and transaction state.

Note:

We made a small demo website that implements the BridgeButton widget. Check it out here: nexus-ui-components-demo.vercel.app
If you just want to see an example that uses the BridgeButton widget, refer to the repo here: nexus-ui-components-demo

Props

Typescript


interface BridgeButtonProps {
  prefill?: BridgeConfig;
  children: (props: { onClick: () => void; isLoading: boolean }) => ReactNode;
  className?: string;
}
 
interface BridgeConfig {
  token?: SUPPORTED_TOKENS;
  amount?: number | string;
  chainId?: SUPPORTED_CHAINS_IDS;
  gas?: bigint;
}

Example

Note:
Refer to the API reference for a full list of supported tokens and chains, as well as more examples of how to use the BridgeButton widget.

Here are examples of how to use the BridgeButton widget:

Basic Bridge Button

App.tsx


import { BridgeButton } from '@avail-project/nexus';
 
function App() {
  return (
    <BridgeButton>
      {({ onClick, isLoading }) => (
        <button onClick={onClick} disabled={isLoading}>
          {isLoading ? 'Loading...' : 'Open Bridge'}
        </button>
      )}
    </BridgeButton>
  );
}

Pre-filled Bridge Button

App.tsx


import { BridgeButton } from '@avail-project/nexus';
 
function App() {
  return (
    <BridgeButton 
      prefill={{ 
        chainId: 137,
        token: 'USDC', 
        amount: '100'
      }}
    >
      {({ onClick, isLoading }) => (
        <button onClick={onClick} disabled={isLoading}>
          {isLoading ? 'Bridging...' : 'Bridge 100 USDC to Polygon'}
        </button>
      )}
    </BridgeButton>
  );
}