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

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

#### Options for namespace property

| Value    | Description                        |
| -------- | ---------------------------------- |
| `eip155` | Ethereum and EVM-compatible chains |
| `solana` | Solana blockchain                  |
| `bip122` | Bitcoin blockchain                 |

#### Enhanced Multichain Examples

The wallet button now supports enhanced multichain functionality with improved namespace targeting:

```javascript theme={null}
<template>
  <div>
    <button 
      v-for="wallet in wallets" 
      :key="`${wallet.wallet}-${wallet.namespace}`"
      @click="() => connectWallet(wallet.wallet, wallet.namespace)" 
      :disabled="!isReady"
    >
      {{ wallet.label }}
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

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

const appKitWalletButton = createAppKitWalletButton()
const isReady = ref(false)

const connectWallet = (wallet, namespace) => {
  const walletButton = createAppKitWalletButton({ namespace })
  walletButton.connect(wallet)
}

onMounted(() => {
  isReady.value = appKitWalletButton.isReady()
})
</script>
```