`<TransferButton>`

SET UP THE SDK BEFORE YOU START:

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

Use the TransferButton component to provide a pre-built transfer interface that handles token transfers to any wallet address on any supported chain. The widget automatically manages the transfer flow, UI modals, and transaction state.

Props

Typescript


interface TransferButtonProps {
  title?: string; // Will appear once intialization is completed
  prefill?: Partial<TransferParams>; // chainId, token, amount, recipient
  className?: string;
  children(props: { onClick(): void; isLoading: boolean }): React.ReactNode;
}

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 TransferButton widget.

Here are examples of how to use the TransferButton widget:

Basic Transfer Button

App.tsx


import { NexusProvider, TransferButton } from '@avail-project/nexus/ui';
 
function App() {
  return (
    <TransferButton>
      {({ onClick, isLoading }) => (
        <button onClick={onClick} disabled={isLoading}>
          {isLoading ? 'Processing...' : 'Send Funds'}
        </button>
      )}
    </TransferButton>
  );
}

Pre-filled Transfer Button

App.tsx


import { NexusProvider, TransferButton } from '@avail-project/nexus/ui';
 
function App() {
  return (
    <TransferButton 
      prefill={{ 
        chainId: 137,           // Polygon
        token: 'USDC', 
        amount: '100',
        recipient: '0x742d35Cc6634C0532925a3b8D4C9db96c4b4Db45'
      }}
    >
      {({ onClick, isLoading }) => (
        <button onClick={onClick} disabled={isLoading}>
          {isLoading ? 'Transferring...' : 'Send 100 USDC to Polygon'}
        </button>
      )}
    </TransferButton>
  );
}