|
@@ -29,20 +29,24 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP |
|
|
block = false, |
|
|
block = false, |
|
|
component: EnabledComponent = 'a', |
|
|
component: EnabledComponent = 'a', |
|
|
disabled = false, |
|
|
disabled = false, |
|
|
|
|
|
href, |
|
|
...etcProps |
|
|
...etcProps |
|
|
}, |
|
|
}, |
|
|
forwardedRef, |
|
|
forwardedRef, |
|
|
) => { |
|
|
) => { |
|
|
const Component = disabled ? 'span' : EnabledComponent; |
|
|
|
|
|
|
|
|
const Component = disabled ? 'button' : EnabledComponent; |
|
|
return ( |
|
|
return ( |
|
|
<Component |
|
|
<Component |
|
|
{...etcProps} |
|
|
{...etcProps} |
|
|
|
|
|
href={disabled ? undefined : href} |
|
|
|
|
|
type={disabled ? 'button' : undefined} |
|
|
ref={forwardedRef} |
|
|
ref={forwardedRef} |
|
|
|
|
|
disabled={disabled || undefined} |
|
|
className={clsx( |
|
|
className={clsx( |
|
|
'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none no-underline m-0', |
|
|
'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none no-underline m-0', |
|
|
'focus:outline-0 focus:ring-4', |
|
|
'focus:outline-0 focus:ring-4', |
|
|
'active:ring-tertiary/50', |
|
|
'active:ring-tertiary/50', |
|
|
disabled && 'opacity-50 cursor-not-allowed', |
|
|
|
|
|
|
|
|
'disabled:opacity-50 disabled:cursor-not-allowed', |
|
|
{ |
|
|
{ |
|
|
'flex w-full': block, |
|
|
'flex w-full': block, |
|
|
'inline-flex max-w-full align-middle': !block, |
|
|
'inline-flex max-w-full align-middle': !block, |
|
@@ -54,9 +58,9 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP |
|
|
'pr-2': compact || menuItem, |
|
|
'pr-2': compact || menuItem, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
'border-2 border-primary focus:border-secondary active:border-tertiary': variant !== 'bare', |
|
|
|
|
|
'bg-negative text-primary focus:text-secondary active:text-tertiary': variant !== 'filled', |
|
|
|
|
|
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative': variant === 'filled', |
|
|
|
|
|
|
|
|
'border-2 border-primary focus:border-secondary active:border-tertiary disabled:border-primary': variant !== 'bare', |
|
|
|
|
|
'bg-negative text-primary focus:text-secondary active:text-tertiary disabled:text-primary': variant !== 'filled', |
|
|
|
|
|
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative disabled:bg-primary': variant === 'filled', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
'h-10': size === 'small', |
|
|
'h-10': size === 'small', |
|
|