@carbon/react
Version:
React components for the Carbon Design System
127 lines (125 loc) • 3.52 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 { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
import { Tooltip } from "../Tooltip/Tooltip.js";
import ButtonBase from "../Button/ButtonBase.js";
import BadgeIndicator from "../BadgeIndicator/index.js";
import classNames from "classnames";
import { forwardRef } from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/IconButton/index.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 IconButtonKinds = [
"primary",
"secondary",
"ghost",
"tertiary"
];
const IconButton = forwardRef(({ align, autoAlign = false, badgeCount, children, className, closeOnActivation = true, defaultOpen = false, disabled, dropShadow = false, enterDelayMs = 100, highContrast = true, kind, label, leaveDelayMs = 100, wrapperClasses, size, isSelected, ...rest }, ref) => {
const prefix = usePrefix();
const tooltipClasses = classNames(wrapperClasses, `${prefix}--icon-tooltip`, { [`${prefix}--icon-tooltip--disabled`]: disabled });
if (badgeCount && (kind !== "ghost" || size !== "lg")) console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
const badgeId = useId("badge-indicator");
return /* @__PURE__ */ jsx(Tooltip, {
align,
autoAlign,
closeOnActivation,
className: tooltipClasses,
defaultOpen,
dropShadow,
enterDelayMs,
highContrast,
label,
leaveDelayMs,
children: /* @__PURE__ */ jsxs(ButtonBase, {
...rest,
disabled,
kind,
ref,
size,
isSelected,
hasIconOnly: true,
className,
"aria-describedby": rest["aria-describedby"] || badgeCount && badgeId,
children: [children, !disabled && badgeCount !== void 0 && /* @__PURE__ */ jsx(BadgeIndicator, {
id: badgeId,
count: badgeCount > 0 ? badgeCount : void 0
})]
})
});
});
IconButton.propTypes = {
align: deprecateValuesWithin(PropTypes.oneOf([
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"left-bottom",
"left-top",
"right",
"right-bottom",
"right-top",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-end",
"left-start",
"right-end",
"right-start"
]), [
"top",
"top-start",
"top-end",
"bottom",
"bottom-start",
"bottom-end",
"left",
"left-start",
"left-end",
"right",
"right-start",
"right-end"
], mapPopoverAlign),
autoAlign: PropTypes.bool,
badgeCount: PropTypes.number,
href: PropTypes.string,
children: PropTypes.node,
className: PropTypes.string,
closeOnActivation: PropTypes.bool,
defaultOpen: PropTypes.bool,
dropShadow: PropTypes.bool,
disabled: PropTypes.bool,
enterDelayMs: PropTypes.number,
isSelected: PropTypes.bool,
highContrast: PropTypes.bool,
kind: PropTypes.oneOf(IconButtonKinds),
label: PropTypes.node.isRequired,
leaveDelayMs: PropTypes.number,
rel: PropTypes.string,
size: PropTypes.oneOf([
"sm",
"md",
"lg"
]),
target: PropTypes.string,
wrapperClasses: PropTypes.string
};
//#endregion
export { IconButton, IconButtonKinds };