Button.tsx

import * as React from "react"
import PSButton from "../../node_modules/@pluralsight/ps-design-system-button/dist/react"
import PSVars from "../../node_modules/@pluralsight/ps-design-system-button/dist/vars"
import { Frame, ControlType, PropertyControls } from "framer"

type Props = PSVars & {
    url: string,
    title: string
}

export class Button extends React.Component {
    render() {
        return (
            <PSButton href={this.props.url} size={this.props.size} appearance={this.props.appearance}>
                {this.props.title}
            </PSButton>
        )
    }

    static propertyControls: PropertyControls<Props> = {
        title: { type: ControlType.String, title: "Title" },
        url: { type: ControlType.String, title: "URL" },
        appearance: {
            type: ControlType.Enum,
            options: ["primary", "secondary", "stroke", "flat"],
            optionTitles: ["Primary", "Secondary", "Stroke", "Flat"],
        },
        size: {
            type: ControlType.Enum,
            options: ["medium","xSmall", "small",  "large"],
            optionTitles: ["Medium", "X-Small", "Small", "Large"],
        }
    }

}