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

Design System for Axeptio

import React, { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';

const sizes = {
  small: css`
    padding: 0 22px;
    height: 46px;
    border-radius: 23px;
  `,
  medium: css`
    padding: 0 22px;
    height: 58px;
    border-radius: 29px;
  `,
  large: css`
    padding: 0 30px;
    height: 70px;
    border-radius: 35px;
  `
};

const ButtonStyled = styled.button`
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  border: 1px solid ${props => props.theme.colors.secondary};
  background: ${props => props.theme.colors.white};
  transition:
    color 250ms ease-out,
    background-color 250ms ease-out;
  cursor: pointer;

  ${({ size }) => sizes[size]}

  &:hover:not(:disabled) {
    background-color: ${({ theme }) => theme.colors.secondary};
    color: ${({ theme }) => theme.colors.white};
  }

  &:focus:not(:disabled) {
    box-shadow:
      0px 0px 0px 2px ${({ theme }) => theme.colors.white},
      0px 0px 0px 4px ${({ theme }) => theme.colors.secondary};
  }

  &:active:not(:disabled) {
    background-color: ${({ theme }) => theme.colors.secondary};
    color: ${({ theme }) => theme.colors.white};
  }

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

const OutlinedButton = forwardRef(({ size = 'medium', children, disabled, ...props }, ref) => {
  return (
    <ButtonStyled ref={ref} size={size} disabled={disabled} {...props}>
      {children}
    </ButtonStyled>
  );
});

OutlinedButton.displayName = 'OutlinedButton';
OutlinedButton.propTypes = {
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  disabled: PropTypes.bool,
  children: PropTypes.element
};

export default OutlinedButton;