@axeptio/design-system/build/src/Core/Controls/IconButton/index.jsx

Design System for Axeptio

import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import Icon from '../../Icon';

const variants = {
  default: css`
    border-color: transparent;

    &:hover:not(:active):not(:disabled) {
      background: ${({ theme }) => theme.colors.grey.v300};
    }

    &:active:not(:disabled) {
      border-color: ${({ theme }) => theme.colors.grey.v200};
    }
  `,
  outlined: css`
    border-color: ${({ theme }) => theme.colors.grey.v200};

    &:hover:not(:active):not(:disabled) {
      border-color: ${({ theme }) => theme.colors.grey.v400};
    }

    &:active:not(:disabled) {
      border-color: ${({ theme }) => theme.colors.grey.v400};
      background: ${({ theme }) => theme.colors.grey.v200};
    }
  `
};

const Button = styled.button`
  background: transparent;
  border: none;
  color: ${({ theme }) => theme.colors.black};
  height: 36px;
  width: 36px;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  box-sizing: border-box;

  &:disabled {
    cursor: not-allowed;
    color: ${({ theme }) => theme.colors.grey.v400};
  }

  ${({ variant }) => variants[variant]}
`;

function IconButton({ icon, variant = 'default', onClick, ...rest }) {
  return (
    <Button type="button" variant={variant} onClick={onClick} {...rest}>
      <Icon name={icon} iconSize={20} />
    </Button>
  );
}

IconButton.propTypes = {
  icon: PropTypes.string.isRequired,
  variant: PropTypes.oneOf(['default', 'outlined']),
  onClick: PropTypes.func
};

export default IconButton;