name | route |
---|---|
Button |
/ |
import Button from './Button' import { Playground, PropsTable } from 'docz'
Instantly share code, notes, and snippets.
const Button = ({ children, type, outline, rounded }) => ( | |
<ButtonStyle type={type} outline={outline} rounded={rounded}> | |
{children} | |
</ButtonStyle> | |
); | |
Button.propTypes = { | |
type: pT.string, | |
outline: pT.bool, | |
rounded: pT.bool |
import React from "react"; | |
import styled from "styled-components"; | |
import pT from "prop-types"; | |
const ButtonStyle = styled.a` | |
padding: 10px; | |
line-height: 40px; | |
text-align: center; | |
border-radius: ${({ rounded }) => (rounded ? "30px" : "5px")}; | |
cursor: pointer; | |
margin: 3px 5px; | |
${({ type, outline }) => TypeButton(type, outline)}; | |
`; |
//importando módulos | |
const OutlineButton = (outline, color) => { | |
if (outline) { | |
return ` | |
border: 1px solid ${color}; | |
background-color: #fff; | |
color: ${color}; | |
`; | |
} else { |
import React from "react"; | |
import styled from "styled-components"; | |
const ButtonStyle = styled.a` | |
padding: 10px; | |
line-height: 40px; | |
text-align: center; | |
border-radius: 5px; | |
cursor: pointer; | |
margin: 3px 5px; |