nicholasess

name	route
Button	/

import Button from './Button' import { Playground, PropsTable } from 'docz'

Button

nicholasess

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

nicholasess

import React from "react";
import styled from "styled-components";
import pT from "prop-types";

nicholasess

name	route
Button	/

import Button from './Button' import { Playground } from 'docz'

Button

nicholasess

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)};
`;

nicholasess

name	route
Button	/

import Button from './Button' import { Playground } from 'docz'

Button

nicholasess

//importando módulos 

const OutlineButton = (outline, color) => {
  if (outline) {
    return `
     border: 1px solid ${color};
     background-color: #fff;
     color: ${color};
  `;
  } else {

nicholasess

name	route
Button	/

import Button from './Button' import { Playground } from 'docz'

Button

nicholasess

name
Button

import Button from './Button' import { Playground } from 'docz'

Button

Basic usage

nicholasess

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;