1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
metamask-extension/ui/components/component-library/button-link/button-link.tsx

60 lines
2.0 KiB
TypeScript
Raw Permalink Normal View History

import React from 'react';
import classnames from 'classnames';
import { ButtonBase, IconSize } from '..';
import {
BackgroundColor,
Color,
} from '../../../helpers/constants/design-system';
import type { PolymorphicRef } from '../box';
import type { ButtonBaseProps } from '../button-base';
import type { ButtonLinkProps } from './button-link.types';
import { ButtonLinkSize, ButtonLinkComponent } from './button-link.types';
export const ButtonLink: ButtonLinkComponent = React.forwardRef(
<C extends React.ElementType = 'button' | 'a'>(
{
className = '',
color,
danger = false,
disabled = false,
loading = false,
size = ButtonLinkSize.Auto,
...props
}: ButtonLinkProps<C>,
ref?: PolymorphicRef<C>,
) => {
return (
<ButtonBase
className={classnames(className, 'mm-button-link', {
'mm-button-link--type-danger': danger,
'mm-button-link--disabled': disabled,
'mm-button-link--loading': loading,
'mm-button-link--size-inherit': size === ButtonLinkSize.Inherit,
'mm-button-link--size-auto': size === ButtonLinkSize.Auto,
})}
paddingLeft={0}
paddingRight={0}
size={size === ButtonLinkSize.Inherit ? null : size}
backgroundColor={BackgroundColor.transparent}
color={color || (danger ? Color.errorDefault : Color.primaryDefault)}
borderRadius={null}
startIconProps={{
size:
size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Sm,
}}
endIconProps={{
size:
size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Sm,
}}
iconLoadingProps={{
size:
size === ButtonLinkSize.Inherit ? IconSize.Inherit : IconSize.Md,
color: color || (danger ? Color.errorDefault : Color.primaryDefault),
}}
ref={ref}
{...{ disabled, loading, ...(props as ButtonBaseProps<C>) }}
/>
);
},
);