add button loading text

pangolindex · Nov 2, 2021 · 2155d0d · 2155d0d
1 parent f0fe189
commit 2155d0d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,12 +3,22 @@ import { IconAfter, IconBefore, Root } from './styles';
 import { ButtonProps } from './types';
 
 const Button: React.FC<ButtonProps> = (props) => {
-  const { iconBefore, children, iconAfter, ...rest } = props;
+  const { iconBefore, children, iconAfter, loading, loadingText, ...rest } = props;
   return (
     <Root {...rest}>
-      {iconBefore && <IconBefore>{iconBefore}</IconBefore>}
-      {children}
-      {iconAfter && <IconAfter>{iconAfter}</IconAfter>}
+      {loading ? (
+        loadingText ? (
+          loadingText
+        ) : (
+          'Loading...'
+        )
+      ) : (
+        <>
+          {iconBefore && <IconBefore>{iconBefore}</IconBefore>}
+          {children}
+          {iconAfter && <IconAfter>{iconAfter}</IconAfter>}
+        </>
+      )}
     </Root>
   );
 };

diff --git a/src/components/Button/types.tsx b/src/components/Button/types.tsx
@@ -26,6 +26,7 @@ export type ButtonProps = {
   loading?: boolean;
   /** loading icon **/
   loadingIcon?: React.ReactNode;
+  loadingText?: string;
   padding?: string;
   borderRadius?: string;
 };