Framer X Code Component

button.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

interface Props {
  label: string;
  className: string;
  onClick: () => void;
  type: "default" | "primary" | "outline";
  disabled: boolean;
}

export class button extends React.Component<Props> {
  // Set default properties
  static defaultProps = {
    label: "Hello World!",
    type: "default",
    onClick: () => {
      console.log(" button clicked");
    },
    disabled: false
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    label: { type: ControlType.String, title: "label" },
    type: {
      type: ControlType.Enum,
      options: ["default", "primary", "outline"],
      optionTitles: ["default", "primary", "outline"],
      title: "Button Type"
    },
    disabled: {
      type: ControlType.Boolean,
      disabledTitle: "true",
      enabledTitle: "false"
    }
  };

  render() {
    const { type, disabled } = this.props;
    const labelColor = type === "primary" ? "#ffffff" : "#444444";
    const bgColor = type === "primary" ? "#1199EE" : "#f5f5f5";
    const borderStyles = type === "outline" ? "2px solid #444444" : "none";

    return (
      <button
        type="button"
        className={this.props.className}
        disabled={this.props.disabled}
        onClick={this.props.onClick}
        style={{
          display: "block",
          textAlign: "center",
          color: labelColor,
          fontSize: "16px",
          fontFamily: "SF Pro Text",
          fontWeight: "bold",
          backgroundColor: bgColor,
          border: borderStyles,
          borderRadius: ".5rem",
          width: "100%",
          padding: "1rem"
        }}
      >
        {this.props.label} {!disabled ? " disabled" : ""}
      </button>
    );
  }
}