Connect Button
Primary wallet connection component that handles wallet connection, disconnection, and displays connection status.
Installation
Usage
<ConnectButton />Props
| Prop | Type | Default |
|---|---|---|
variant? | 'default' | 'outline' | 'ghost' | 'gradient' | 'default' |
size? | 'sm' | 'md' | 'lg' | 'md' |
connectors? | string[] | ['metamask', 'walletconnect'] |
onConnect? | (connector: any) => void | - |
onDisconnect? | () => void | - |
onConnectionError? | (error: Error) => void | - |
Examples
Basic Usage
<ConnectButton />Custom Styling
<ConnectButton
variant="gradient"
size="lg"
className="shadow-lg hover:shadow-xl"
/>With Callbacks
<ConnectButton
onConnect={(connector) => {
toast.success(`Connected via ${connector.name}`)
}}
onConnectionError={(error) => {
toast.error('Connection failed')
}}
/>Custom Connectors
<ConnectButton
connectors={['metamask', 'walletconnect', 'coinbase']}
variant="outline"
>
Connect Your Wallet
</ConnectButton>Last updated on