Trigger the modal

AppKit’s web components are custom and reusable HTML tags. They will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Web components are global html elements that don’t require importing.

List of optional properties for AppKit web components

<appkit-button />

VariableDescriptionType
disabledEnable or disable the button.boolean
balanceShow or hide the user’s balance.'show' | 'hide'
sizeDefault size for the button.'md' | 'sm'
labelThe text shown in the button.string
loadingLabelThe text shown in the button when the modal is open.string
namespaceOption to show specific namespace account info. Note: eip155 is for EVM and bip122 is for Bitcoin.'eip155' | 'solana' | 'bip122'

<appkit-account-button />

VariableDescriptionType
disabledEnable or disable the button.boolean
balanceShow or hide the user’s balance.'show' | 'hide'

<appkit-connect-button />

VariableDescriptionType
sizeDefault size for the button.'md' | 'sm'
labelThe text shown in the button.string
loadingLabelThe text shown in the button when the modal is open.string

<appkit-network-button />

VariableDescriptionType
disabledEnable or disable the button.boolean

<appkit-wallet-button />

Using the wallet button components (Demo in our Lab), you can directly connect to the top 20 wallets, WalletConnect QR, and all the social logins. This component allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal.

Follow these steps to use the component:

  1. Install the package:
npm install @reown/appkit-wallet-button
  1. Import the library in the project:
import "@reown/appkit-wallet-button/react";
  1. Use the component in the project:
<appkit-wallet-button wallet="metamask" />

Options for wallet property

TypeOptions
QR CodewalletConnect
Walletsmetamask, trust, coinbase, rainbow, coinbase, 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 and tokenpocket
Social loginsgoogle, github, apple, facebook, x, discord and farcaster