jsx import { CSSObject , jsx } from '@emotion/core' ; import { Loading } from '../Misc' ; import { COLOR } from '../Identity' ; import { filterProps } from '../util' ; import { filterTextProps } from '../Text' ; import { ButtonProps , buttonStyle } from './Button' ; import type { Theme } from '../Layout' ; export const buttonLinkStyle = ( theme , props ) => ( { ... buttonStyle ( theme , props ) , display : 'inline-flex !important' , } ) ; const filterButtonLinkProps = ( props ) => { return filterProps ( filterTextProps ( props ) as ButtonProps < HTMLAnchorElement > , [ 'backgroundColor' , 'disabled' , 'noCapital' , ] ) ; } ; export const ButtonLink = ( { children , showLoading , loadingColor = COLOR . WHITE , ... props } ) => ( < a css = { theme => buttonLinkStyle ( theme , props ) } { ... filterButtonLinkProps ( props ) } > { showLoading ? < Loading size = { 30 } color = { loadingColor } style = { { display : 'flex' , margin : 'auto' } } / > : children } < /a>);