Hooks Only

If the user is not already logged in, it will trigger login with that wallet rather than linking. The difference between login and linking is that login will create a new user if one doesn’t exist, whereas linking will add the wallet to the existing user.
useWalletOptions provides a method called selectWalletOption that allows you to prompt the user to link using a specific wallet (by passing in the key). This method takes a wallet key, you can see how to find the available wallet keys in Find a Wallet Key.
import { useWalletOptions, useIsLoggedIn } from "@dynamic-labs/sdk-react-core";

// component setup etc.

const isLoggedIn = useIsLoggedIn();

const { selectWalletOption } = useWalletOptions();

const connectWithWallet = async (walletKey) => {
  return await selectWalletOption(walletKey)
}

return (
  <>
    {isLoggedIn ? (
      <button onClick={() => connectWithWallet('wallet-key')}>Link Wallet</button>
    ) : (
      <button onClick={() => connectWithWallet('wallet-key')}>Login</button>
    )}
  </>
)

Using Dynamic Modals

You can allow the user to link a new wallet by using the useDynamicModals hook and the setShowLinkNewWalletModal method.
You will need to also use the DynamicMultiWalletPromptsWidget component
Linking will fail if user is not fully logged in i.e. if they are missing info. See Check for Missing User Info for more information.
import {
  useDynamicModals,
  DynamicMultiWalletPromptsWidget,
} from '@dynamic-labs/sdk-react-core'

const LinkWallet = ({ text }) => {
  const { setShowLinkNewWalletModal } = useDynamicModals()

  return (
    <>
      <div className="link-wallet-container">
        <Button
          className="profile-button"
          onClick={() => setShowLinkNewWalletModal(true)}
        >
          {text}
        </Button>
      </div>
      <DynamicMultiWalletPromptsWidget />
    </>
  )
}
You can unlink a wallet by using the useDynamicContext hook, specifically the handleUnlinkWallet method.
import { useDynamicContext, useUserWallets } from '@dynamic-labs/sdk-react-core'

import { Tooltip } from 'react-tooltip'

const LinkedWallets = () => {
  const { handleUnlinkWallet } = useDynamicContext()

  const userWallets = useUserWallets()

  return (
    <>
      {userWallets.length > 0 && (
        <div className="profile-wallets-container">
          <h2>Connected Wallets</h2>
          {userWallets.length < 2 && <Tooltip id="unlink-tooltip" />}
          <div className="profile-wallets-inner-container">
            {userWallets.map((wallet) => (
              <Flex key={wallet.address}>
                <p>{wallet.address}</p>
                <Spacer />
                <a
                  data-tooltip-id="unlink-tooltip"
                  data-tooltip-content="Can't unlink your only wallet!"
                >
                  <Button
                    size="xs"
                    onClick={() => handleUnlinkWallet(wallet.id)}
                    disabled={userWallets.length < 2}
                  >
                    Unlink
                  </Button>
                </a>
              </Flex>
            ))}
          </div>
        </div>
      )}
    </>
  )
}