@atlaskit/atlassian-navigation/dist/esm/components/IconButton/index.js

A horizontal navigation component for Atlassian products.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["icon", "testId", "tooltip"];
import React, { forwardRef } from 'react';
import Button from '@atlaskit/button/custom-theme-button';
import Tooltip from '@atlaskit/tooltip';
import { useTheme } from '../../theme';
import { getIconButtonTheme } from './styles';
/**
 * __Icon button__
 *
 * An icon button is used to create navigation items such as Help, Settings
 * and Notifications. You can use this component to create your own items to
 * pass into `AtlassianNavigation`'s render props, but where possible you should
 * rely on the defaults.
 *
 */
export var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
  var icon = props.icon,
    testId = props.testId,
    tooltip = props.tooltip,
    buttonProps = _objectWithoutProperties(props, _excluded);
  var theme = useTheme();
  var button = /*#__PURE__*/React.createElement(Button, _extends({
    appearance: "primary",
    testId: testId,
    iconBefore: icon,
    ref: ref
    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
    ,
    theme: getIconButtonTheme(theme)
  }, buttonProps));
  if (tooltip) {
    return /*#__PURE__*/React.createElement(Tooltip, {
      content: tooltip,
      hideTooltipOnClick: true
    }, button);
  }
  return button;
});