From b1b09c58e1e0b02e75c0f927bdac5c22b9a4d2fb Mon Sep 17 00:00:00 2001
From: Nico Glennon <nicoglennon@icloud.com>
Date: Mon, 16 May 2022 13:26:34 -0400
Subject: [PATCH] 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                  |  5 +++++
 .../components/ConnectButton/ConnectButton.tsx  |  5 ++++-
 site/data/docs/connect-button.mdx               | 17 ++++++++++++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/silver-beds-hang.md

diff --git a/.changeset/silver-beds-hang.md b/.changeset/silver-beds-hang.md
new file mode 100644
index 0000000000..394291bfd0
--- /dev/null
+++ b/.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.
diff --git a/packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx b/packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx
index 91c8f56766..147c48fec0 100644
--- a/packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx
+++ b/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>
             )}
diff --git a/site/data/docs/connect-button.mdx b/site/data/docs/connect-button.mdx
index 29158448bf..271b653f97 100644
--- a/site/data/docs/connect-button.mdx
+++ b/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.