Create React Button

Sam Hansen

The code defines two buttons, one labeled "Normal Button" and the other labeled "Primary Button." The "Normal Button" has a light blue background with a 3px border-radius and a 2px solid palevioletred border. The "Primary Button" has a red background with a 2px solid palevioletred border and a white color. The buttons have a 0.5em margin on the left and right and a 1em padding on top and bottom.

Library: react

import React from 'react'
import styled, { css } from 'styled-components'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);