Dynamic Button Example

dynamicButton.tsx

import * as React from 'react';
import { PropertyControls, ControlType } from 'framer';
import { NumberControlDescription } from 'framer/types/src/render';

// Define type of property
interface Props {
  width: Number;
  height: number;
  label: string;
  buttonType: string;
}

export class Button extends React.Component<Partial<Props>> {
  // Set default properties
  static defaultProps = {
    width: 100,
    height: 44,
    label: 'Button',
    buttonType: 'primary'
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    label: { type: ControlType.String, title: 'Label' },
    buttonType: {
      type: ControlType.Enum,
      options: ['primary', 'secondary', 'tertiary'],
      optionTitles: ['primary', 'secondary', 'tertiary']
    }
  };

  render() {
    const { width, height, buttonType } = this.props;
    return (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: height,
          padding: '8px 16px',
          borderRadius: '100px',
          textAlign: 'center',
          color: 'white',
          // Ternary operator to set bg based on selection (shorthand if/else statment)
          background:
            buttonType === 'primary'
              ? 'blue'
              : buttonType === 'secondary'
                ? 'red'
                : 'gray'
        }}
      >
        {this.props.label}
      </div>
    );
  }
}