From 38bd1f376e5b4e5157c7e824a90aa1da8826f7bb Mon Sep 17 00:00:00 2001
From: Mateo Wartelle <mateowartelle@gmail.com>
Date: Tue, 3 Oct 2023 18:31:30 -0500
Subject: [PATCH] fix: button with a label

---
 src/components/Button/Button.spec.tsx    | 9 +++++++++
 src/components/Button/Button.stories.tsx | 7 +++++++
 src/components/Button/Button.tsx         | 7 ++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/Button.spec.tsx b/src/components/Button/Button.spec.tsx
index 7b533311c9..36bc4f450b 100644
--- a/src/components/Button/Button.spec.tsx
+++ b/src/components/Button/Button.spec.tsx
@@ -118,6 +118,13 @@ describe('Components / Button', () => {
       expect(button()).toHaveTextContent('Something or other');
     });
 
+    it('should render both children then label', () => {
+      render(<Button label="2">Messages</Button>);
+
+      expect(button()).toHaveTextContent('Messages');
+      expect(label()).toHaveTextContent('2');
+    });
+
     describe('`as` and `href` props', () => {
       it('should render an anchor `<a>` when `href=".."`', () => {
         render(<Button href="#" label="Something or other" />);
@@ -386,6 +393,8 @@ describe('Components / Button', () => {
 
 const button = () => screen.getByRole('button');
 
+const label = () => screen.getByTestId('flowbite-button-label');
+
 const buttonLink = () => screen.getByRole('link');
 
 const buttonListItem = () => screen.getByRole('listitem');
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index fbfd13eb9f..a2219f470a 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -29,3 +29,10 @@ DefaultButton.storyName = 'Default';
 DefaultButton.args = {
   children: 'Button',
 };
+
+export const ButtonWithLabel = Template.bind({});
+ButtonWithLabel.storyName = 'Button with a label';
+ButtonWithLabel.args = {
+  children: 'Messages',
+  label: '2',
+};
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index f828d3562f..893f65bf8a 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -148,12 +148,13 @@ const ButtonComponentFn = <T extends ElementType = 'button'>(
               {processingSpinner || <Spinner size={size} />}
             </span>
           )}
-          {typeof children !== 'undefined' ? (
-            children
-          ) : (
+          {typeof children !== 'undefined' ? children : ''}
+          {typeof label !== 'undefined' ? (
             <span data-testid="flowbite-button-label" className={twMerge(theme.label)}>
               {isProcessing ? processingLabel : label}
             </span>
+          ) : (
+            ''
           )}
         </>
       </span>