button.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Button } from "@bulb/design";

interface Props {
  text: string;
  width: number;
  height: number;
  fullWidth: boolean;
}

export class button extends React.Component {
  static defaultProps = {
    text: "Click me",
    fullWidth: false
  };

  static propertyControls: PropertyControls<Props> = {
    text: { type: ControlType.String, title: "Title" },
    fullWidth: { type: ControlType.Boolean, title: "Full Width" }
  };

  render() {
    const { text, fullWidth } = this.props;
    const { width, height } = this.props;
    return (
      <div
        style={{
          width,
          height,
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <Button purpose="outline" fullWidth={fullWidth}>
          {text || button.defaultProps.text}
        </Button>
      </div>
    );
  }
}