Skip to content

Instantly share code, notes, and snippets.

@nicholasess
Last active June 30, 2018 23:23
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nicholasess/d7d559a9b5bf9e8d2a3233cf938b32c8 to your computer and use it in GitHub Desktop.
//importando módulos
const OutlineButton = (outline, color) => {
if (outline) {
return `
border: 1px solid ${color};
background-color: #fff;
color: ${color};
`;
} else {
return `
background-color: ${color};
color: #fff;
`;
}
};
const TypeButton = (type, outline) => {
switch (type) {
case "primary":
return OutlineButton(outline, "#54a0ff");
case "danger":
return OutlineButton(outline, "#ff6b6b");
case "info":
return OutlineButton(outline, "#48dbfb");
case "success":
return OutlineButton(outline, "#1dd1a1");
default: {
return OutlineButton(outline, "#576574");
}
}
};
const ButtonStyle = styled.a`
padding: 10px;
line-height: 40px;
text-align: center;
border-radius: 5px;
cursor: pointer;
margin: 3px 5px;
${({ type, outline }) => TypeButton(type, outline)};
`;
const Button = ({ children, type, outline }) => (
<ButtonStyle type={type} outline={outline}>
{children}
</ButtonStyle>
);
//exportando o botao
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment