@carbon/react
Version:
React components for the Carbon Design System
90 lines (88 loc) • 3.08 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.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import { useId } from "../../internal/useId.js";
import classNames from "classnames";
import React from "react";
import { jsx } from "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.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 = usePrefix();
const commonProps = {
tabIndex,
className: classNames(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__ */ jsx(ButtonImageElement, {
"aria-label": iconDescription,
className: `${prefix}--btn__icon`,
"aria-hidden": "true"
});
const dangerButtonVariants = [
"danger",
"danger--tertiary",
"danger--ghost"
];
let component = "button";
const assistiveId = 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__ */ 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.createElement(component, {
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
onClick,
...rest,
...commonProps,
...otherProps
}, assistiveText, children, buttonImage);
});
//#endregion
export { ButtonBase as default };