# Connect Buttons and UI

Build a "Connect with Joey" button for the browser extension and the mobile app.

Joey doesn't ship ready-made UI components. Use the building blocks below to add a connect button that matches your design.

## Browser extension

`@joeywallet/wallet-sdk/vanilla` includes `bindConnectButton`, which keeps a button in sync with the connection state (install, connect or connected):

```ts
import { bindConnectButton, createJoeySession } from '@joeywallet/wallet-sdk/vanilla'

const session = createJoeySession()
bindConnectButton(document.getElementById('connect')!, session, {
  connectLabel: 'Connect Joey',
  installUrl: 'https://joeywallet.xyz/extension',
})
```

In React, use `useJoey()` to render your own button. See [React and vanilla](/docs/browser-extension/react).

## Mobile (WalletConnect)

wc-client's [`connect`](/docs/integration/actions/connect) opens the Reown AppKit modal with Joey featured first. For your own button, use [`generate`](/docs/integration/actions/generate) to get a URI for a QR code and a deep link for phones:

```tsx
'use client';

import core from '@joey-wallet/wc-client/core';
import { useProvider } from './provider';

export function JoeyButton() {
  const { actions } = useProvider();

  const onClick = async () => {
    const { data, error } = await actions.generate({
      walletId: core.constants.wallets.joey.projectId,
      openModal: false,
    });
    if (error || !data) throw error;

    if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
      window.location.href = data.deeplink; // joey://settings/wc?uri=…
    }
    // On desktop, render data.uri as a QR code
  };

  return <button onClick={onClick}>Connect with Joey</button>;
}
```

## Brand assets

When you label a button, use the name **Joey Wallet** (or **Joey**). For logos, contact [joey@joeywallet.xyz](mailto:joey@joeywallet.xyz).