@metamask/design-system-react
Version:
Design system react ui components
26 lines • 1.23 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { forwardRef } from "react";
const React = $importDefault($React);
import { twMerge } from "../../utils/tw-merge.mjs";
import { ButtonBase } from "../ButtonBase/index.mjs";
export const ButtonHero = forwardRef(({ className, isDisabled, isLoading, ...props }, ref) => {
const isInteractive = !(isDisabled || isLoading);
const mergedClassName = twMerge(
// Base hero styles - locked to light theme primary colors
'bg-primary-default text-primary-inverse',
// Loading state
isLoading && 'bg-primary-default-pressed',
// Hover/Active states - only applied when interactive
isInteractive && [
'hover:bg-primary-default-hover',
'active:bg-primary-default-pressed',
], 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', className);
return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, "data-theme": "light", ...props }));
});
ButtonHero.displayName = 'ButtonHero';
//# sourceMappingURL=ButtonHero.mjs.map