> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Wallet Buttons

<Frame>
  <img src="https://mintcdn.com/reown-5552f0bb/EKbxEvu_zecC7Jp2/images/assets/walletButtons.jpg?fit=max&auto=format&n=EKbxEvu_zecC7Jp2&q=85&s=4311e99e62b86393bba087f4d750f58f" width="1416" height="356" data-path="images/assets/walletButtons.jpg" />
</Frame>

Using the wallet button composable ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), 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:

1. Install the package:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

2. Import and use in your Vue component:

```javascript theme={null}
<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:

```javascript theme={null}
<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.
</Note>

#### 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`                                                                                                                                                                                                                                                                                                                                                                                                                                                      |