Skip to content

Instantly share code, notes, and snippets.

@ravid7000

ravid7000/styled-baseButton.js

Created September 18, 2020 02:23
Show Gist options
  • Save ravid7000/cb876c3fa63454725a3b1bdd8d3e0f90 to your computer and use it in GitHub Desktop.
Save ravid7000/cb876c3fa63454725a3b1bdd8d3e0f90 to your computer and use it in GitHub Desktop.
Download ZIP
Button component using base element
Raw
styled-baseButton.js
import BaseElement from './baseElement';
export const BaseButton = styled(BaseElement).attrs(props => {
return {
as: 'button',
spacing: {
px: props.theme.spacing(2),
py: props.theme.spacing(1),
},
textAlign: 'center',
}
})`
white-space: nowrap;
border: none;
cursor: pointer;
border-radius: 4px; // should be part of theme
[disabled] {
opacity: 0.6;
pointer-events: none;
}
`;
// Button Primary Variant
// PrimaryButton.js
export const PrimaryButton = styled(BaseButton).attrs(props => {
return {
color: props.theme.color.white.main, // some light color
bg: props.theme.color.primary.main,
hoverColor: props.theme.color.white.main, // some light color,
hoverBg: props.theme.color.primary.light,
}
})``;
// Button Secondary Variant
// SecondaryButton.js
export const PrimaryButton = styled(BaseButton).attrs(props => {
return {
color: props.theme.color.white.main, // some light color
bg: props.theme.color.secondary.main,
hoverColor: props.theme.color.white.main, // some light color,
hoverBg: props.theme.color.secondary.light,
}
})``;
@MrBrownser
Copy link

Hey, just a small remark, this const name on L41 was already taken, I think you meant to name it SecondaryButton 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment