feat: add label prop to ConnectButton (#379)

* feat: add label prop to ConnectButton

* fix: remove label from example

* fix: docs language

.changeset/silver-beds-hang.md

@@ -0,0 +1,5 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Add the `label` prop to the `ConnectButton` component to easily display a custom label on the button.

packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx

@@ -20,17 +20,20 @@ export interface ConnectButtonProps {
   accountStatus?: ResponsiveValue<AccountStatus>;
   showBalance?: ResponsiveValue<boolean>;
   chainStatus?: ResponsiveValue<ChainStatus>;
+  label?: string;
 }
 
 const defaultProps = {
   accountStatus: 'full',
   chainStatus: { largeScreen: 'full', smallScreen: 'icon' },
+  label: 'Connect Wallet',
   showBalance: { largeScreen: true, smallScreen: false },
 } as const;
 
 export function ConnectButton({
   accountStatus = defaultProps.accountStatus,
   chainStatus = defaultProps.chainStatus,
+  label = defaultProps.label,
   showBalance = defaultProps.showBalance,
 }: ConnectButtonProps) {
   const chains = useRainbowKitChains();
@@ -262,7 +265,7 @@ export function ConnectButton({
                   transform={{ active: 'shrink', hover: 'grow' }}
                   transition="default"
                 >
-                  Connect Wallet
+                  {label}
                 </Box>
               </Box>
             )}

site/data/docs/connect-button.mdx

@@ -21,10 +21,17 @@ export const YourApp = () => {
 
 ### Props
 
-The `ConnectButton` component exposes several props to customize its appearance by toggling the visibility of different elements.
+The `ConnectButton` component exposes several props to customize its appearance, including toggling the visibility of different elements.
 
 <PropsTable
   data={[
+    {
+      name: 'label',
+      required: false,
+      default: 'Connect Wallet',
+      type: 'string',
+      description: 'The text label displayed on the Connect button',
+    },
     {
       name: 'accountStatus',
       required: false,
@@ -59,6 +66,14 @@ The `ConnectButton` component exposes several props to customize its appearance
 
 ### Examples
 
+#### Label
+
+Use the `label` prop to set a custom `ConnectButton` text.
+
+```tsx
+<ConnectButton label="__Sign in__" />
+```
+
 #### Account status
 
 Here are a few different ways you can use the `accountStatus` prop.