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

A horizontal navigation component for Atlassian products.

import _extends from "@babel/runtime/helpers/extends";
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 const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    icon,
    testId,
    tooltip,
    ...buttonProps
  } = props;
  const theme = useTheme();
  const 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;
});