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 { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default button */}
      <AppKitButton />
      
      {/* Network selection button */}
      <AppKitNetworkButton />
      
      {/* Button with specific namespace */}
      <AppKitButton namespace="eip155" />
    </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" />

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function WalletConnector() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      console.error('Connection error:', err)
    },
    onSuccess: data => {
      console.log('Connected successfully:', data)
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}