@carbon/react
Version:
React components for the Carbon Design System
93 lines (91 loc) • 3.38 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_useId = require("../../internal/useId.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/Button/ButtonBase.tsx
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const ButtonBase = react.default.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "danger", disabled = false, hasIconOnly = false, href, iconDescription, isExpressive = false, isSelected, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tabIndex, type = "button", ...rest }, ref) {
const prefix = require_usePrefix.usePrefix();
const commonProps = {
tabIndex,
className: (0, classnames.default)(className, {
[`${prefix}--btn`]: true,
[`${prefix}--btn--xs`]: size === "xs" && !isExpressive,
[`${prefix}--btn--sm`]: size === "sm" && !isExpressive,
[`${prefix}--btn--md`]: size === "md" && !isExpressive,
[`${prefix}--btn--lg`]: size === "lg" && !isExpressive,
[`${prefix}--btn--xl`]: size === "xl",
[`${prefix}--btn--2xl`]: size === "2xl",
[`${prefix}--layout--size-${size}`]: size,
[`${prefix}--btn--${kind}`]: kind,
[`${prefix}--btn--disabled`]: disabled,
[`${prefix}--btn--expressive`]: isExpressive,
[`${prefix}--btn--icon-only`]: hasIconOnly,
[`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === "ghost"
}),
ref
};
const buttonImage = !ButtonImageElement ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonImageElement, {
"aria-label": iconDescription,
className: `${prefix}--btn__icon`,
"aria-hidden": "true"
});
const dangerButtonVariants = [
"danger",
"danger--tertiary",
"danger--ghost"
];
let component = "button";
const assistiveId = require_useId.useId("danger-description");
const { "aria-pressed": ariaPressed, "aria-describedby": ariaDescribedBy } = rest;
let otherProps = {
disabled,
type,
"aria-describedby": dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || void 0,
"aria-pressed": ariaPressed ?? (hasIconOnly && kind === "ghost" ? isSelected : void 0)
};
const anchorProps = { href };
let assistiveText = null;
if (dangerButtonVariants.includes(kind)) assistiveText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
id: assistiveId,
className: `${prefix}--visually-hidden`,
children: dangerDescription
});
if (as) {
component = as;
otherProps = {
...otherProps,
...anchorProps
};
} else if (href && !disabled) {
component = "a";
otherProps = anchorProps;
}
return react.default.createElement(component, {
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
onClick,
...rest,
...commonProps,
...otherProps
}, assistiveText, children, buttonImage);
});
//#endregion
exports.default = ButtonBase;