leadhomesa / oxygen

React component library
https://leadhomesa.github.io/oxygen/
MIT License
6 stars 1 forks source link

Refactor buttons #74

Closed jenniferharmon closed 3 years ago

jenniferharmon commented 4 years ago

Style.js is a bit cleaner now with improved hover and active button states and icon support.

If you have a button style you use a lot, you could create a component for easy use like so:

export const LargeWarningOutlineButton = ({ children }) => (
  <StyledButton
    loading={false}
    icon={false}
    color='warning'
    variant='outlined'
    size='lg'
  >
    {children}
  </StyledButton>
);

A custom button that uses the default styles with some additional custom style of its own could be created like this:

const MyButton = styled(Button)`
  color: #ff0000;
  height: 80px;
`;

or

const MyButton = styled(LargeWarningOutlineButton)`
  color: #ff0000;
  height: 80px;
`;