@carbon/react/lib/components/Button/Button.js

React components for the Carbon Design System

/**
 * 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_ButtonBase = require("./ButtonBase.js");
const require_index = require("../IconButton/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/Button/Button.tsx
/**
* 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 ButtonKinds = [
	"primary",
	"secondary",
	"danger",
	"ghost",
	"danger--primary",
	"danger--ghost",
	"danger--tertiary",
	"tertiary"
];
const ButtonSizes = [
	"xs",
	"sm",
	"md",
	"lg",
	"xl",
	"2xl"
];
const ButtonTooltipAlignments = [
	"start",
	"center",
	"end"
];
const ButtonTooltipPositions = [
	"top",
	"right",
	"bottom",
	"left"
];
function isIconOnlyButton(hasIconOnly, _kind) {
	if (hasIconOnly === true) return true;
	return false;
}
const Button = react.default.forwardRef((props, ref) => {
	const { as, autoAlign = false, children, hasIconOnly = false, tooltipHighContrast = true, tooltipDropShadow = false, iconDescription, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tooltipAlignment = "center", tooltipPosition = "top", ...rest } = props;
	if (ButtonImageElement && !children && !iconDescription) console.error("Button: renderIcon property specified without also providing an iconDescription property. This may impact accessibility for screen reader users.");
	const iconOnlyImage = !ButtonImageElement ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonImageElement, {});
	if (!isIconOnlyButton(hasIconOnly, kind)) {
		const { tooltipAlignment, ...propsWithoutTooltipAlignment } = props;
		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.default, {
			ref,
			...propsWithoutTooltipAlignment
		});
	} else {
		let align = void 0;
		if (tooltipPosition === "top" || tooltipPosition === "bottom") {
			if (tooltipAlignment === "center") align = tooltipPosition;
			if (tooltipAlignment === "end") align = `${tooltipPosition}-end`;
			if (tooltipAlignment === "start") align = `${tooltipPosition}-start`;
		}
		if (tooltipPosition === "right" || tooltipPosition === "left") align = tooltipPosition;
		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
			...rest,
			ref,
			as,
			align,
			label: iconDescription,
			kind,
			size,
			highContrast: tooltipHighContrast,
			dropShadow: tooltipDropShadow,
			onMouseEnter,
			onMouseLeave,
			onFocus,
			onBlur,
			autoAlign,
			onClick,
			renderIcon: iconOnlyImage ? null : ButtonImageElement,
			children: iconOnlyImage ?? children
		});
	}
});
Button.displayName = "Button";
Button.propTypes = {
	as: prop_types.default.oneOfType([
		prop_types.default.func,
		prop_types.default.string,
		prop_types.default.elementType
	]),
	autoAlign: prop_types.default.bool,
	children: prop_types.default.node,
	className: prop_types.default.string,
	dangerDescription: prop_types.default.string,
	disabled: prop_types.default.bool,
	hasIconOnly: prop_types.default.bool,
	href: prop_types.default.string,
	iconDescription: (props) => {
		if (props.renderIcon && !props.children && !props.iconDescription) return /* @__PURE__ */ new Error("renderIcon property specified without also providing an iconDescription property.");
		return null;
	},
	isExpressive: prop_types.default.bool,
	isSelected: prop_types.default.bool,
	kind: (props, propName, componentName) => {
		const { hasIconOnly } = props;
		const validKinds = hasIconOnly ? require_index.IconButtonKinds : ButtonKinds;
		if (props[propName] === void 0) return null;
		if (!validKinds.includes(props[propName])) return /* @__PURE__ */ new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Expected one of ${validKinds.join(", ")}.`);
		return null;
	},
	onBlur: prop_types.default.func,
	onClick: prop_types.default.func,
	onFocus: prop_types.default.func,
	onMouseEnter: prop_types.default.func,
	onMouseLeave: prop_types.default.func,
	rel: prop_types.default.string,
	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
	role: prop_types.default.string,
	size: prop_types.default.oneOf([
		"xs",
		"sm",
		"md",
		"lg",
		"xl",
		"2xl"
	]),
	tabIndex: prop_types.default.number,
	target: prop_types.default.string,
	tooltipAlignment: prop_types.default.oneOf([
		"start",
		"center",
		"end"
	]),
	tooltipDropShadow: prop_types.default.bool,
	tooltipHighContrast: prop_types.default.bool,
	tooltipPosition: prop_types.default.oneOf([
		"top",
		"right",
		"bottom",
		"left"
	]),
	type: prop_types.default.oneOf([
		"button",
		"reset",
		"submit"
	])
};
//#endregion
exports.ButtonKinds = ButtonKinds;
exports.ButtonSizes = ButtonSizes;
exports.ButtonTooltipAlignments = ButtonTooltipAlignments;
exports.ButtonTooltipPositions = ButtonTooltipPositions;
exports.default = Button;