@metamask/design-system-react
Version:
Design system react ui components
40 lines • 1.88 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { forwardRef } from "react";
const React = $importDefault($React);
import { ButtonIconSize } from "../../types/index.mjs";
import { twMerge } from "../../utils/tw-merge.mjs";
import { Icon } from "../Icon/index.mjs";
import { TWCLASSMAP_BUTTONICON_SIZE_DIMENSION, MAP_BUTTONICON_SIZE_ICONSIZE } from "./ButtonIcon.constants.mjs";
export const ButtonIcon = forwardRef(({ className, iconName, iconProps, ariaLabel, isDisabled = false, isInverse = false, isFloating = false, size = ButtonIconSize.Md, style, ...props }, ref) => {
const isInteractive = !isDisabled;
const mergedClassName = twMerge(
// Base styles
'inline-flex items-center justify-center p-0',
// Size styles
TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],
// Floating styles
isFloating && [
'rounded-full',
!isInverse && 'bg-icon-default text-background-default',
isInverse && 'bg-icon-default text-background-default',
],
// Non-floating styles
!isFloating && [
'rounded bg-transparent',
// Only apply hover/active styles when interactive
isInteractive && 'hover:bg-hover active:bg-pressed',
!isInverse && 'text-icon-default',
isInverse && 'text-background-default',
],
// Disabled state
isDisabled && 'cursor-not-allowed opacity-50', className);
return (React.createElement("button", { ref: ref, className: mergedClassName, disabled: isDisabled, "aria-label": ariaLabel, style: style, ...props },
React.createElement(Icon, { name: iconName, size: MAP_BUTTONICON_SIZE_ICONSIZE[size], className: twMerge('text-inherit', iconProps?.className), ...iconProps })));
});
ButtonIcon.displayName = 'ButtonIcon';
//# sourceMappingURL=ButtonIcon.mjs.map