Skip to content

Instantly share code, notes, and snippets.

@byoigres

byoigres/Button.js

Created July 5, 2017 00:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save byoigres/4fdfe4a92c3db91f48bc23312fd72667 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save byoigres/4fdfe4a92c3db91f48bc23312fd72667 to your computer and use it in GitHub Desktop.
Download ZIP
Button example using styled-components with theme
Raw
Button.js
import React from 'react';
import styled from 'styled-components';
import { darken } from 'polished';
const Button = ({ className, children }) => (
<button className={className}>
{children}
</button>
);
const StyledButton = styled.button`
background-color: ${props => props.primary ? props.theme.primaryColor : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid ${props => props.primary ? props.theme.primaryColor : 'white'};
border-radius: 3px;
transition: background-color 1s ease;
&:hover {
background-color: ${props => (
props.primary ? darken(0.2, props.theme.primaryColor) : 'white'
)};
cursor: pointer;
}
`;
StyledButton.defaultProps = {
theme: {
primaryColor: 'palevioletred'
}
}
export default StyledButton;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment