index-1.js

import React from 'react';
import styled from 'styled-components';

import { Section, Paragraph } from './style.js';

const Button = styled.button`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
  ${p => p && p.secondary`
    background: white;
    color: palevioletred;
  `}
`

const Main = () => (
  <Section>
    <Paragraph>
      Look at my buttons, they are amazing buttons !
    </Paragraph>
    <Button type="primary">
      A Primary Button
    </Button>
    <Button type="secondary">
      And I am a secondary
    </Button>
  </Section>
 );

export default Main;