@@ -39,13 +39,19 @@ export const Button: React.FC<IButton> = ({
3939 width = '36' ,
4040} ) => (
4141 < button
42- className = { `${ className } ${ useDefaultWidth && `w-${ width } ` } ` }
42+ className = { `${ className } ${ useDefaultWidth && `w-${ width } ` } ${
43+ disabled || loading ? 'opacity-60 cursor-not-allowed' : ''
44+ } flex justify-center items-center`}
4345 disabled = { disabled || loading }
4446 onClick = { onClick }
4547 type = { type }
4648 id = { id }
4749 >
48- { children }
50+ { loading ? (
51+ < Icon name = "loading" color = "#4d76b8" className = "w-6 animate-spin-slow" />
52+ ) : (
53+ children
54+ ) }
4955 </ button >
5056) ;
5157
@@ -74,7 +80,7 @@ export const PrimaryButton: React.FC<IPrimaryButton> = ({
7480 disabled || loading
7581 ? 'opacity-60 cursor-not-allowed'
7682 : 'opacity-100 hover:bg-button-primaryhover'
77- } border-button-primary bg-button-primary text-brand-white w-${ width } `}
83+ } border-button-primary bg-button-primary text-brand-white w-${ width } flex justify-center items-center `}
7884 disabled = { disabled || loading }
7985 onClick = { onClick }
8086 type = { type }
@@ -121,7 +127,7 @@ export const SecondButton: React.FC<IPrimaryButton> = ({
121127 disabled || loading
122128 ? 'opacity-60 cursor-not-allowed'
123129 : 'opacity-100 hover:bg-button-primaryhover'
124- } border-button-primary text-brand-white w-${ width } `}
130+ } border-button-primary text-brand-white w-${ width } flex justify-center items-center `}
125131 disabled = { disabled || loading }
126132 onClick = { onClick }
127133 type = { type }
@@ -168,7 +174,7 @@ export const SecondaryButton: React.FC<IPrimaryButton> = ({
168174 disabled || loading
169175 ? 'opacity-60 cursor-not-allowed'
170176 : 'opacity-100 hover:bg-button-secondaryhover'
171- } border-button-secondary transition-all duration-300 bg-button-secondary text-brand-white w-36 py-2.5`}
177+ } border-button-secondary transition-all duration-300 bg-button-secondary text-brand-white w-36 py-2.5 flex justify-center items-center `}
172178 disabled = { disabled || loading }
173179 onClick = { onClick }
174180 type = { type }
@@ -211,7 +217,7 @@ export const NeutralButton: React.FC<IPrimaryButton> = ({
211217 : 'opacity-100 hover:opacity-90'
212218 } border-button-neutral transition-all duration-300 bg-button-neutral py-2.5 ${
213219 extraStyles ? extraStyles : 'text-sm text-brand-royalblue'
214- } `}
220+ } flex justify-center items-center `}
215221 disabled = { disabled || loading }
216222 onClick = { onClick }
217223 type = { type }
0 commit comments