diff options
Diffstat (limited to 'src/components/ui/button/index.tsx')
-rw-r--r-- | src/components/ui/button/index.tsx | 32 |
1 files changed, 16 insertions, 16 deletions
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index dc984bf95..9444efde2 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -117,12 +117,12 @@ const styles = (theme: Theme) => ({ | |||
117 | zIndex: 9999, | 117 | zIndex: 9999, |
118 | }, | 118 | }, |
119 | loaderContainer: { | 119 | loaderContainer: { |
120 | width: (props: IProps): string => (!props.busy ? '0' : '40px'), | 120 | width: (props: IProps): string => (props.busy ? '40px' : '0'), |
121 | height: 20, | 121 | height: 20, |
122 | overflow: 'hidden', | 122 | overflow: 'hidden', |
123 | transition: loaderContainerTransition, | 123 | transition: loaderContainerTransition, |
124 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), | 124 | marginLeft: (props: IProps): number => (props.busy ? 20 : 10), |
125 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), | 125 | marginRight: (props: IProps): number => (props.busy ? -20 : -10), |
126 | position: (): Property.Position => 'inherit', | 126 | position: (): Property.Position => 'inherit', |
127 | }, | 127 | }, |
128 | icon: { | 128 | icon: { |
@@ -217,38 +217,38 @@ class ButtonComponent extends Component<IProps, IState> { | |||
217 | </> | 217 | </> |
218 | ); | 218 | ); |
219 | 219 | ||
220 | const wrapperComponent = !href ? ( | 220 | const wrapperComponent = href ? ( |
221 | <button | 221 | <a |
222 | id={id} | 222 | href={href} |
223 | type={type} | 223 | target={target} |
224 | onClick={onClick} | 224 | onClick={onClick} |
225 | className={classnames({ | 225 | className={classnames({ |
226 | [`${classes.button}`]: true, | 226 | [`${classes.button}`]: true, |
227 | [`${classes[buttonType as ButtonType]}`]: true, | 227 | [`${classes[buttonType as ButtonType]}`]: true, |
228 | [`${classes.disabled}`]: disabled, | ||
229 | [`${className}`]: className, | 228 | [`${className}`]: className, |
230 | })} | 229 | })} |
231 | disabled={disabled} | 230 | rel={target === '_blank' ? 'noopener' : ''} |
232 | data-type="franz-button" | 231 | data-type="franz-button" |
233 | {...(htmlForm && { form: htmlForm })} | ||
234 | > | 232 | > |
235 | {content} | 233 | {content} |
236 | </button> | 234 | </a> |
237 | ) : ( | 235 | ) : ( |
238 | <a | 236 | <button |
239 | href={href} | 237 | id={id} |
240 | target={target} | 238 | type={type} |
241 | onClick={onClick} | 239 | onClick={onClick} |
242 | className={classnames({ | 240 | className={classnames({ |
243 | [`${classes.button}`]: true, | 241 | [`${classes.button}`]: true, |
244 | [`${classes[buttonType as ButtonType]}`]: true, | 242 | [`${classes[buttonType as ButtonType]}`]: true, |
243 | [`${classes.disabled}`]: disabled, | ||
245 | [`${className}`]: className, | 244 | [`${className}`]: className, |
246 | })} | 245 | })} |
247 | rel={target === '_blank' ? 'noopener' : ''} | 246 | disabled={disabled} |
248 | data-type="franz-button" | 247 | data-type="franz-button" |
248 | {...(htmlForm && { form: htmlForm })} | ||
249 | > | 249 | > |
250 | {content} | 250 | {content} |
251 | </a> | 251 | </button> |
252 | ); | 252 | ); |
253 | 253 | ||
254 | return wrapperComponent; | 254 | return wrapperComponent; |