Components

import { 
  AppKitButton, 
  AppKitConnectButton, 
  AppKitAccountButton, 
  AppKitNetworkButton 
} from "@reown/appkit/react";

export default function MyApp() {
  return (
    <div>
      {/* Default button that handles the modal state */}
      <AppKitButton />
      
      {/* Button for connecting a wallet */}
      <AppKitConnectButton />
      
      {/* Button for account view */}
      <AppKitAccountButton />
      
      {/* Button for network selection */}
      <AppKitNetworkButton />
    </div>
  );
}

import "@reown/appkit-wallet-button/react";

import { AppKitWalletButton } from "@reown/appkit-wallet-button/react";

export default function MyApp() {
  return <AppKitWalletButton wallet="metamask" />;
}

<!-- Connect to Ethereum/EVM chains -->
<appkit-wallet-button wallet="metamask" namespace="eip155" />

<!-- Connect to Solana -->
<appkit-wallet-button wallet="phantom" namespace="solana" />

<!-- Connect to Bitcoin -->
<appkit-wallet-button wallet="leather" namespace="bip122" />

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <appkit-wallet-button
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}