Aha Button Component

React component for aha-button.

Installation

npm i @simpozio/aha-button

Usage

Basic

import {useState} from 'react';
import {AhaButton} from '@simpozio/aha-button';

const Component = () => {
  const [loading, setLoading] = useState(false);
  const onButtonHover = (event) => {/* */}
  const onButtonFocus = (event) => {/* */}
  const onButtonBlur = (event) => {/* */}
  const onButtonClick = (event) => setLoading(true)

  return (
    <AhaButton
      pending={loading}
      onHover={onButtonHover}
      onFocus={onButtonFocus}
      onBlur={onButtonBlur}
      onClick={onButtonClick}
    />
  )
}

Styling

Theming

import {useContext} from 'react';
import {AhaButton} from '@simpozio/aha-button';
import {ThemeContext} from 'styled-components`;

const defaultTheme = {
  FONT: {
    SIZE: {
      XS: '1rem',
      S: '1.2rem',
      M: '1.6rem'
    },
    FAMILY: {
      BASE: '"Helvetica", sans-serif'
    },
    WEIGHT: {
      BASE: 600
    },
    SPACING: {
      M: '0.1em'
    }
  },
  COLOR: {
    PRIMARY: 'purple',
    INVERT: '#fff'
  },
  BACKGROUND: {
    INVERT: 'purple'
  },
  TRANSITION: {
    TIMING: {
      EASE_OUT_QUAD: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
    },
    DURATION: {
      BASE: '0.3s'
    }
  },
  MEDIA: {
    SM: 768,
    MD: 1024
  }
};

const Component = () => {
  const currentTheme = useContext(ThemeContext);

  const onButtonHover = (event) => {/* */}
  const onButtonFocus = (event) => {/* */}
  const onButtonBlur = (event) => {/* */}
  const onButtonClick = (event) => {/* */}

  return (
    <AhaButton theme={currentTheme || defaultTheme}>Submit</AhaButton>
  )
}

Styled Component

Default styling with styled components

import styled from 'styled-components';
import Color from 'color'
import {AhaButton} from '@simpozio/aha-button';

const StyledAhaButton = styled(AhaButton)`
  color: #fff;
  background: #43a047;
  border: 0.2em solid #43a047 !important;
  padding: 0 1.6em;
  height: 3em;
  line-height: 2.8em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: border-color linear 0.2s, background-color linear 0.2s,
    color linear 0.2s;

  svg {
    opacity: 0 !important;
  }

  &:hover,
  &:focus,
  &:active {
    color: rgba(255, 255, 255, 0.9);
    background-color: ${Color('#43a047')
      .alpha(0.9)
      .string()};
    border-color: transparent !important;
  }

  &:disabled {
    color: ${Color('#fff')
      .alpha(0.6)
      .string()};
    border-color: transparent !important;
    background: ${Color('#43a047')
      .alpha(0.6)
      .string()};
  }
`;

const Component = () => {
  const onButtonHover = (event) => {/* */}
  const onButtonFocus = (event) => {/* */}
  const onButtonBlur = (event) => {/* */}
  const onButtonClick = (event) => {/* */}

  return (
    <StyledAhaButton>Submit</StyledAhaButton>
  )
}

CSS Mixin

In this method you can access all inner props of Aha Button

import {css} from 'styled-components';
import {AhaButton} from '@simpozio/aha-button';

const customCss = css(
({Spin, outlined, pending, theme}) => css`
  color: ${theme.COLOR.PRIMARY};
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  ${Spin} rect {
    stroke: #607d8b;
    fill: ${outlined ? 'none' : '#607D8B'};
  }

  &:hover,
  &:focus,
  &:active {
    color: #607d8b;
  }

  &:disabled {
    color: ${Color(outlined ? theme.COLOR.PRIMARY : theme.COLOR.INVERT)
      .alpha(0.6)
      .string()};

    ${Spin} rect {
      stroke: transparent;

      ${pending &&
        css`
          stroke: #607d8b;
        `}
    }
  }
`
);

const Component = () => {
  const onButtonHover = (event) => {/* */}
  const onButtonFocus = (event) => {/* */}
  const onButtonBlur = (event) => {/* */}
  const onButtonClick = (event) => {/* */}

  return (
    <AhaButton styles={customStyles}>Submit</AhaButton>
  )
}

Props

Button accepts standard HTML-attributes:

• className: string
• type: 'submit' | 'button' | 'reset'
• disabled: boolean
• onFocus: function
• onBlur: function
• onClick: function

Additional props:

• outlined: boolean - set outlined style of button
• pending: boolean - set pending state of button
• icon: JSX.Element - icon component, if you pass icon prop - all children will be ignored!
• theme: object - object with theme props
• styles: CSSProp - custom styles in format of interpolated styled components string
• onHover: function - implemetation of onmouseenter callback

Development

Look simpozio-frontend-common library