@metamask/design-system-react
Version:
Design system react ui components
40 lines • 1.98 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { forwardRef } from "react";
const React = $importDefault($React);
import { TextButtonSize } from "../../types/index.mjs";
import { twMerge } from "../../utils/tw-merge.mjs";
import { ButtonBase } from "../ButtonBase/index.mjs";
import { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from "./TextButton.constants.mjs";
export const TextButton = forwardRef(({ className, isInverse, isDisabled, size = TextButtonSize.BodyMd, textProps, ...props }, ref) => {
const mergedClassName = twMerge(
// Reset padding, height and animations
'h-auto rounded-none bg-transparent px-0', 'transform-none transition-none active:scale-100',
// Default text button styles
!isInverse && 'text-primary-default',
// Inverse styles
isInverse && 'text-primary-inverse',
// Hover/Active states - only applied when interactive
!isDisabled && [
!isInverse && [
'hover:bg-hover hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4',
'active:bg-pressed active:text-primary-default-pressed active:decoration-primary-default-pressed',
],
isInverse && [
'hover:bg-hover hover:text-primary-inverse hover:underline hover:decoration-primary-inverse hover:decoration-2 hover:underline-offset-4',
'active:bg-pressed active:text-primary-inverse active:decoration-primary-inverse',
],
],
// Disabled styles
isDisabled && ['opacity-50', 'cursor-not-allowed'], className);
return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, textProps: {
variant: MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size],
...textProps,
}, ...props }));
});
TextButton.displayName = 'TextButton';
//# sourceMappingURL=TextButton.mjs.map