Customization

XenConnect allows full customization of the Connect Wallet button using the label and style props.

1. Styling the Connect Button

You can pass Tailwind CSS classes or inline styles to customize the button’s look. Below is an example of a blue button with hover effects:

"use client";

import { WalletButton } from "xenconnect"; // Import WalletButton

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <WalletButton 
        label="Connect Wallet"
        style="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md shadow-md transition"
      />
    </div>
  );
}

2. Customizing the Button Label

You can modify the text of the Connect Wallet button using the label prop. Below, the button is changed to say Sign In with Crypto instead:

"use client";

import { WalletButton } from "xenconnect"; // Import WalletButton

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <WalletButton 
        label="Sign In with Crypto"
        style="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transition"
      />
    </div>
  );
}

More Customization Options

With the style and label props, you can:

Change colors, sizes, and spacing.
Modify text to match your branding.
Apply hover, focus, and active states.
Use Tailwind classes or inline styles.