FramerX Styled Component Example Button

Button.tsx

import * as React from "react"
import { PropertyControls, ControlType } from "framer"
import styled, { css } from "styled-components"

const StyledButton = styled.button`
  padding: 20px;
  border-radius: 10px;
  border: 0;
  font-size: 2em;

  ${props => props.type == 'primary' && css`
    color: white;
    background-color: green;
  `}

  ${props => props.type == 'secondary' && css`
    color: white;
    background-color: blue;
  `}
`

// Define type of property
interface Props {
  text: string;
  type: string;
}

export class Button extends React.Component<Props> {

  // Set default properties
  static defaultProps = {
    text: "Hello World!",
    type: "primary",
  }

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    text: { 
      type: ControlType.String, 
      title: "Text" 
    },
    type: { 
      type: ControlType.Enum, 
      title: "Type",
      options: ['primary', 'secondary'],
      optionTitles: ['Primary Button', 'Secondary Button'] 
    },
  }

  render() {
    return (
      <StyledButton type={this.props.type}>
        {this.props.text}
      </StyledButton>
    )
  }
}