Skip to content

Instantly share code, notes, and snippets.

@nicholasess
Last active June 30, 2018 23:23
Embed
What would you like to do?
//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