Wallet Buttons - Reown Docs

Using the wallet button composable (Demo in our Lab), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.

Follow these steps to use the composable:

Install the package:

npm install @reown/appkit-wallet-button

Import and use in your Vue component:

<template>  <div>    <button @click="() => appKitWalletButton.connect('metamask')" :disabled="!isReady">      Connect to MetaMask    </button>    <button @click="() => appKitWalletButton.connect('walletConnect')" :disabled="!isReady">      Open QR modal    </button>    <button @click="() => appKitWalletButton.connect('google')" :disabled="!isReady">      Connect to Google    </button>  </div></template><script setup>import { ref, onMounted } from 'vue'import { createAppKitWalletButton } from '@reown/appkit-wallet-button'const appKitWalletButton = createAppKitWalletButton()const isReady = ref(false)onMounted(() => {  isReady.value = appKitWalletButton.isReady()})</script>

Multichain Support#

You can specify a blockchain namespace to target specific chains:

<template>  <div>    <!-- Connect to Ethereum/EVM chains -->    <button @click="() => evmWalletButton.connect('metamask')" :disabled="!isEvmReady">      Connect MetaMask (EVM)    </button>        <!-- Connect to Solana -->    <button @click="() => solanaWalletButton.connect('phantom')" :disabled="!isSolanaReady">      Connect Phantom (Solana)    </button>        <!-- Connect to Bitcoin -->    <button @click="() => bitcoinWalletButton.connect('leather')" :disabled="!isBitcoinReady">      Connect Leather (Bitcoin)    </button>  </div></template><script setup>import { ref, onMounted } from 'vue'import { createAppKitWalletButton } from '@reown/appkit-wallet-button'const evmWalletButton = createAppKitWalletButton({ namespace: 'eip155' })const solanaWalletButton = createAppKitWalletButton({ namespace: 'solana' })const bitcoinWalletButton = createAppKitWalletButton({ namespace: 'bip122' })const isEvmReady = ref(false)const isSolanaReady = ref(false)const isBitcoinReady = ref(false)onMounted(() => {  isEvmReady.value = evmWalletButton.isReady()  isSolanaReady.value = solanaWalletButton.isReady()  isBitcoinReady.value = bitcoinWalletButton.isReady()})</script>

Note

Make sure to call wallet button methods after createAppKit has been initialized.

Options for wallet property#

Type	Options
QR Code	`walletConnect`
Wallets	`metamask`, `trust`, `coinbase`, `rainbow`, `jupiter`, `solflare`, `coin98`, `magic-eden`, `backpack`, `frontier`, `xverse`, `okx`, `bitget`, `leather`, `binance`, `uniswap`, `safepal`, `bybit`, `phantom`, `ledger`, `timeless-x`, `safe`, `zerion`, `oneinch`, `crypto-com`, `imtoken`, `kraken`, `ronin`, `robinhood`, `exodus`, `argent`, `tokenpocket`, `haha`, `ambire-wallet`, `bitpay`, `blade-wallet`, `brave`, `coinstats`, `kresus-superapp`, `plena-app`, `status`, `tomo-wallet`, `valora`, and `zengo-wallet`
Social logins	`google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster`