diff --git a/.circleci/config.yml b/.circleci/config.yml
index 538b2cdee9e8ed..07e2004c0e16ad 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -136,6 +136,12 @@ jobs:
       - run:
           name: '`yarn docs:api` changes committed?'
           command: git diff --exit-code
+      - run:
+          name: Generate the framer components
+          command: yarn workspace framer build
+      - run:
+          name: '`yarn workspace framer build` changes committed?'
+          command: git diff --exit-code
       - run:
           name: Lint
           command: yarn lint:ci
diff --git a/framer/Material-UI.framerfx/code/Button.tsx b/framer/Material-UI.framerfx/code/Button.tsx
index 2501d076d8678c..848d1b80337f72 100644
--- a/framer/Material-UI.framerfx/code/Button.tsx
+++ b/framer/Material-UI.framerfx/code/Button.tsx
@@ -6,36 +6,36 @@ import MuiButton from '@material-ui/core/Button';
 import { Icon } from './Icon';
 
 interface Props {
-  color?: 'default' | 'inherit' | 'primary' | 'secondary';
+  color?: 'inherit' | 'primary' | 'secondary';
   disabled?: boolean;
   disableElevation?: boolean;
   endIcon?: string;
   fullWidth?: boolean;
   href?: string;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'large' | 'medium' | 'small';
   startIcon?: string;
-  variant?: 'text' | 'outlined' | 'contained';
   startIconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp';
   endIconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp';
   label?: string;
   width?: number;
   height?: number;
+  variant?: 'contained' | 'outlined' | 'text';
 }
 
 const defaultProps: Props = {
-  color: 'default',
+  color: 'primary',
   disabled: false,
   disableElevation: false,
   endIcon: undefined,
   fullWidth: false,
   size: 'medium',
   startIcon: undefined,
-  variant: 'text',
   startIconTheme: 'Filled',
   endIconTheme: 'Filled',
   label: 'Button',
   width: 100,
   height: 38,
+  variant: 'text',
 };
 
 export const Button: React.SFC<Props> = (props: Props) => {
@@ -69,7 +69,7 @@ addPropertyControls(Button, {
   color: {
     type: ControlType.Enum,
     title: 'Color',
-    options: ['default', 'inherit', 'primary', 'secondary'],
+    options: ['inherit', 'primary', 'secondary'],
   },
   disabled: {
     type: ControlType.Boolean,
@@ -94,17 +94,12 @@ addPropertyControls(Button, {
   size: {
     type: ControlType.Enum,
     title: 'Size',
-    options: ['small', 'medium', 'large'],
+    options: ['large', 'medium', 'small'],
   },
   startIcon: {
     type: ControlType.String,
     title: 'Start icon',
   },
-  variant: {
-    type: ControlType.Enum,
-    title: 'Variant',
-    options: ['text', 'outlined', 'contained'],
-  },
   startIconTheme: {
     type: ControlType.Enum,
     title: 'Start icon theme',
@@ -119,4 +114,9 @@ addPropertyControls(Button, {
     type: ControlType.String,
     title: 'Label',
   },
+  variant: {
+    type: ControlType.Enum,
+    title: 'Variant',
+    options: ['contained', 'outlined', 'text'],
+  },
 });
diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx
index 97480fed41c1c9..fd560bf70de2db 100644
--- a/framer/Material-UI.framerfx/code/Checkbox.tsx
+++ b/framer/Material-UI.framerfx/code/Checkbox.tsx
@@ -50,7 +50,7 @@ addPropertyControls(Checkbox, {
   color: {
     type: ControlType.Enum,
     title: 'Color',
-    options: ['primary', 'secondary', 'default'],
+    options: ['default', 'primary', 'secondary'],
   },
   disabled: {
     type: ControlType.Boolean,
@@ -59,7 +59,7 @@ addPropertyControls(Checkbox, {
   size: {
     type: ControlType.Enum,
     title: 'Size',
-    options: ['small', 'medium'],
+    options: ['medium', 'small'],
   },
   label: {
     type: ControlType.String,
diff --git a/framer/Material-UI.framerfx/code/Chip.tsx b/framer/Material-UI.framerfx/code/Chip.tsx
index a62e1cbabf2661..888a7b7d7b228a 100644
--- a/framer/Material-UI.framerfx/code/Chip.tsx
+++ b/framer/Material-UI.framerfx/code/Chip.tsx
@@ -13,7 +13,7 @@ interface Props {
   disabled?: boolean;
   icon?: string;
   label?: string;
-  size?: 'small' | 'medium';
+  size?: 'medium' | 'small';
   variant?: 'default' | 'outlined';
   avatarImageFile?: string;
   avatarImageUrl?: string;
@@ -99,7 +99,7 @@ addPropertyControls(Chip, {
   size: {
     type: ControlType.Enum,
     title: 'Size',
-    options: ['small', 'medium'],
+    options: ['medium', 'small'],
   },
   variant: {
     type: ControlType.Enum,
diff --git a/framer/Material-UI.framerfx/code/CircularProgress.tsx b/framer/Material-UI.framerfx/code/CircularProgress.tsx
index 0d96ab1c80e8ae..7aea80f2c9be9d 100644
--- a/framer/Material-UI.framerfx/code/CircularProgress.tsx
+++ b/framer/Material-UI.framerfx/code/CircularProgress.tsx
@@ -5,7 +5,7 @@ import { addPropertyControls, ControlType } from 'framer';
 import MuiCircularProgress from '@material-ui/core/CircularProgress';
 
 interface Props {
-  color?: 'primary' | 'secondary' | 'inherit';
+  color?: 'inherit' | 'primary' | 'secondary';
   thickness?: number;
   value?: number;
   variant?: 'determinate' | 'indeterminate' | 'static';
@@ -38,7 +38,7 @@ addPropertyControls(CircularProgress, {
   color: {
     type: ControlType.Enum,
     title: 'Color',
-    options: ['primary', 'secondary', 'inherit'],
+    options: ['inherit', 'primary', 'secondary'],
   },
   thickness: {
     type: ControlType.Number,
diff --git a/framer/Material-UI.framerfx/code/Fab.tsx b/framer/Material-UI.framerfx/code/Fab.tsx
index 3499efaa49c5b3..c675adc9be916e 100644
--- a/framer/Material-UI.framerfx/code/Fab.tsx
+++ b/framer/Material-UI.framerfx/code/Fab.tsx
@@ -9,8 +9,8 @@ interface Props {
   color?: 'default' | 'inherit' | 'primary' | 'secondary';
   disabled?: boolean;
   href?: string;
-  size?: 'small' | 'medium' | 'large';
-  variant?: 'round' | 'extended';
+  size?: 'large' | 'medium' | 'small';
+  variant?: 'extended' | 'round';
   icon?: string;
   iconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp';
   label?: string;
@@ -65,12 +65,12 @@ addPropertyControls(Fab, {
   size: {
     type: ControlType.Enum,
     title: 'Size',
-    options: ['small', 'medium', 'large'],
+    options: ['large', 'medium', 'small'],
   },
   variant: {
     type: ControlType.Enum,
     title: 'Variant',
-    options: ['round', 'extended'],
+    options: ['extended', 'round'],
   },
   icon: {
     type: ControlType.String,
diff --git a/framer/Material-UI.framerfx/code/Icon.tsx b/framer/Material-UI.framerfx/code/Icon.tsx
index af4ebb1e609cdd..25f6bbe53970c1 100644
--- a/framer/Material-UI.framerfx/code/Icon.tsx
+++ b/framer/Material-UI.framerfx/code/Icon.tsx
@@ -6,7 +6,7 @@ import { addPropertyControls, ControlType } from 'framer';
 import * as Icons from '@material-ui/icons';
 
 interface Props {
-  color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'error' | 'disabled';
+  color?: 'action' | 'disabled' | 'error' | 'inherit' | 'primary' | 'secondary';
   icon?: string;
   theme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp';
   width?: number;
@@ -37,7 +37,7 @@ addPropertyControls(Icon, {
   color: {
     type: ControlType.Enum,
     title: 'Color',
-    options: ['inherit', 'primary', 'secondary', 'action', 'error', 'disabled'],
+    options: ['action', 'disabled', 'error', 'inherit', 'primary', 'secondary'],
   },
   icon: {
     type: ControlType.String,
diff --git a/framer/Material-UI.framerfx/code/IconButton.tsx b/framer/Material-UI.framerfx/code/IconButton.tsx
index e02795d1725dc4..2a098384fb4c33 100644
--- a/framer/Material-UI.framerfx/code/IconButton.tsx
+++ b/framer/Material-UI.framerfx/code/IconButton.tsx
@@ -11,7 +11,7 @@ import { Icon } from './Icon';
 interface Props {
   color?: 'default' | 'inherit' | 'primary' | 'secondary';
   disabled?: boolean;
-  size?: 'small' | 'medium';
+  size?: 'medium' | 'small';
   icon?: string;
   iconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp';
   badgeContent?: string;
@@ -61,7 +61,7 @@ addPropertyControls(IconButton, {
   size: {
     type: ControlType.Enum,
     title: 'Size',
-    options: ['small', 'medium'],
+    options: ['medium', 'small'],
   },
   icon: {
     type: ControlType.String,
diff --git a/framer/Material-UI.framerfx/code/LinearProgress.tsx b/framer/Material-UI.framerfx/code/LinearProgress.tsx
index 1a59a4c3cd62a3..891e01be278514 100644
--- a/framer/Material-UI.framerfx/code/LinearProgress.tsx
+++ b/framer/Material-UI.framerfx/code/LinearProgress.tsx
@@ -8,7 +8,7 @@ interface Props {
   color?: 'primary' | 'secondary';
   value?: number;
   valueBuffer?: number;
-  variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
+  variant?: 'buffer' | 'determinate' | 'indeterminate' | 'query';
   width?: number;
   height?: number;
 }
@@ -54,6 +54,6 @@ addPropertyControls(LinearProgress, {
   variant: {
     type: ControlType.Enum,
     title: 'Variant',
-    options: ['determinate', 'indeterminate', 'buffer', 'query'],
+    options: ['buffer', 'determinate', 'indeterminate', 'query'],
   },
 });
diff --git a/framer/Material-UI.framerfx/code/ListItem.tsx b/framer/Material-UI.framerfx/code/ListItem.tsx
index 80a4003b8ab21c..0914ea0fe6b151 100644
--- a/framer/Material-UI.framerfx/code/ListItem.tsx
+++ b/framer/Material-UI.framerfx/code/ListItem.tsx
@@ -26,7 +26,7 @@ import { Icon } from './Icon';
 import { IconButton } from './IconButton';
 
 interface Props {
-  alignItems?: 'flex-start' | 'center';
+  alignItems?: 'center' | 'flex-start';
   autoFocus?: boolean;
   button?: boolean;
   dense?: boolean;
@@ -145,7 +145,7 @@ addPropertyControls(ListItem, {
   alignItems: {
     type: ControlType.Enum,
     title: 'Align items',
-    options: ['flex-start', 'center'],
+    options: ['center', 'flex-start'],
   },
   autoFocus: {
     type: ControlType.Boolean,
diff --git a/framer/Material-UI.framerfx/code/Radio.tsx b/framer/Material-UI.framerfx/code/Radio.tsx
index 22329d8b5b441c..32aafc8fc54b5a 100644
--- a/framer/Material-UI.framerfx/code/Radio.tsx
+++ b/framer/Material-UI.framerfx/code/Radio.tsx
@@ -8,9 +8,9 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import MuiRadio from '@material-ui/core/Radio';
 
 interface Props {
-  color?: 'primary' | 'secondary' | 'default';
+  color?: 'default' | 'primary' | 'secondary';
   disabled?: boolean;
-  size?: 'small' | 'medium';
+  size?: 'medium' | 'small';
   label?: string;
   width?: number;
   height?: number;
@@ -35,7 +35,7 @@ addPropertyControls(Radio, {
   color: {
     type: ControlType.Enum,
     title: 'Color',
-    options: ['primary', 'secondary', 'default'],
+    options: ['default', 'primary', 'secondary'],
   },
   disabled: {
     type: ControlType.Boolean,
@@ -44,7 +44,7 @@ addPropertyControls(Radio, {
   size: {
     type: ControlType.Enum,
     title: 'Size',
-    options: ['small', 'medium'],
+    options: ['medium', 'small'],
   },
   label: {
     type: ControlType.String,
diff --git a/framer/Material-UI.framerfx/code/Slider.tsx b/framer/Material-UI.framerfx/code/Slider.tsx
index af5b8e64a1baf1..41ded7677664ea 100644
--- a/framer/Material-UI.framerfx/code/Slider.tsx
+++ b/framer/Material-UI.framerfx/code/Slider.tsx
@@ -11,8 +11,8 @@ interface Props {
   min?: number;
   orientation?: 'horizontal' | 'vertical';
   step?: number;
-  track?: 'normal' | false | 'inverted';
-  valueLabelDisplay?: 'on' | 'auto' | 'off';
+  track?: 'inverted' | 'normal' | false;
+  valueLabelDisplay?: 'auto' | 'off' | 'on';
   width?: number;
   height?: number;
 }
@@ -67,11 +67,11 @@ addPropertyControls(Slider, {
   track: {
     type: ControlType.Enum,
     title: 'Track',
-    options: ['normal', false, 'inverted'],
+    options: ['inverted', 'normal', false],
   },
   valueLabelDisplay: {
     type: ControlType.Enum,
     title: 'Value label display',
-    options: ['on', 'auto', 'off'],
+    options: ['auto', 'off', 'on'],
   },
 });
diff --git a/framer/Material-UI.framerfx/code/Switch.tsx b/framer/Material-UI.framerfx/code/Switch.tsx
index ffd5d2b026d198..3db8538c8ab30d 100644
--- a/framer/Material-UI.framerfx/code/Switch.tsx
+++ b/framer/Material-UI.framerfx/code/Switch.tsx
@@ -50,7 +50,7 @@ addPropertyControls(Switch, {
   color: {
     type: ControlType.Enum,
     title: 'Color',
-    options: ['primary', 'secondary', 'default'],
+    options: ['default', 'primary', 'secondary'],
   },
   disabled: {
     type: ControlType.Boolean,
@@ -59,7 +59,7 @@ addPropertyControls(Switch, {
   size: {
     type: ControlType.Enum,
     title: 'Size',
-    options: ['small', 'medium'],
+    options: ['medium', 'small'],
   },
   label: {
     type: ControlType.String,
diff --git a/framer/Material-UI.framerfx/code/Tabs.tsx b/framer/Material-UI.framerfx/code/Tabs.tsx
index ea1485cd778999..d111214d64b719 100644
--- a/framer/Material-UI.framerfx/code/Tabs.tsx
+++ b/framer/Material-UI.framerfx/code/Tabs.tsx
@@ -13,10 +13,11 @@ import { Icon } from './Icon';
 
 interface Props {
   centered?: boolean;
-  indicatorColor?: 'secondary' | 'primary';
-  scrollButtons?: 'auto' | 'desktop' | 'on' | 'off';
-  textColor?: 'secondary' | 'primary' | 'inherit';
-  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  indicatorColor?: 'primary' | 'secondary';
+  scrollButtons?: 'auto' | 'desktop' | 'off' | 'on';
+  selectionFollowsFocus?: boolean;
+  textColor?: 'inherit' | 'primary' | 'secondary';
+  variant?: 'fullWidth' | 'scrollable' | 'standard';
   appBarColor?: 'default' | 'primary' | 'secondary' | 'inherit';
   icons?: string[];
   labels?: string[];
@@ -80,22 +81,26 @@ addPropertyControls(Tabs, {
   indicatorColor: {
     type: ControlType.Enum,
     title: 'Indicator color',
-    options: ['secondary', 'primary'],
+    options: ['primary', 'secondary'],
   },
   scrollButtons: {
     type: ControlType.Enum,
     title: 'Scroll buttons',
-    options: ['auto', 'desktop', 'on', 'off'],
+    options: ['auto', 'desktop', 'off', 'on'],
+  },
+  selectionFollowsFocus: {
+    type: ControlType.Boolean,
+    title: 'Selection follows focus',
   },
   textColor: {
     type: ControlType.Enum,
     title: 'Text color',
-    options: ['secondary', 'primary', 'inherit'],
+    options: ['inherit', 'primary', 'secondary'],
   },
   variant: {
     type: ControlType.Enum,
     title: 'Variant',
-    options: ['standard', 'scrollable', 'fullWidth'],
+    options: ['fullWidth', 'scrollable', 'standard'],
   },
   appBarColor: {
     type: ControlType.Enum,
diff --git a/framer/Material-UI.framerfx/code/TextField.tsx b/framer/Material-UI.framerfx/code/TextField.tsx
index 7271f5adb4ffff..8cb869a9938876 100644
--- a/framer/Material-UI.framerfx/code/TextField.tsx
+++ b/framer/Material-UI.framerfx/code/TextField.tsx
@@ -15,8 +15,8 @@ interface Props {
   multiline?: boolean;
   placeholder?: string;
   required?: boolean;
-  size?: 'small' | 'medium';
-  variant?: 'standard' | 'outlined' | 'filled';
+  size?: 'medium' | 'small';
+  variant?: 'filled' | 'outlined' | 'standard';
   width?: number;
   height?: number;
 }
@@ -90,11 +90,11 @@ addPropertyControls(TextField, {
   size: {
     type: ControlType.Enum,
     title: 'Size',
-    options: ['small', 'medium'],
+    options: ['medium', 'small'],
   },
   variant: {
     type: ControlType.Enum,
     title: 'Variant',
-    options: ['standard', 'outlined', 'filled'],
+    options: ['filled', 'outlined', 'standard'],
   },
 });
diff --git a/framer/Material-UI.framerfx/code/Typography.tsx b/framer/Material-UI.framerfx/code/Typography.tsx
index a477b977eac47e..fccd6df052abff 100644
--- a/framer/Material-UI.framerfx/code/Typography.tsx
+++ b/framer/Material-UI.framerfx/code/Typography.tsx
@@ -5,31 +5,31 @@ import { addPropertyControls, ControlType } from 'framer';
 import MuiTypography from '@material-ui/core/Typography';
 
 interface Props {
-  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+  align?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
   color?:
-    | 'initial'
+    | 'error'
     | 'inherit'
+    | 'initial'
     | 'primary'
     | 'secondary'
     | 'textPrimary'
-    | 'textSecondary'
-    | 'error';
+    | 'textSecondary';
   noWrap?: boolean;
   variant?:
+    | 'body1'
+    | 'body2'
+    | 'button'
+    | 'caption'
     | 'h1'
     | 'h2'
     | 'h3'
     | 'h4'
     | 'h5'
     | 'h6'
-    | 'subtitle1'
-    | 'subtitle2'
-    | 'body1'
-    | 'body2'
-    | 'caption'
-    | 'button'
+    | 'inherit'
     | 'overline'
-    | 'inherit';
+    | 'subtitle1'
+    | 'subtitle2';
   label?: string;
   width?: number;
   height?: number;
@@ -56,19 +56,19 @@ addPropertyControls(Typography, {
   align: {
     type: ControlType.Enum,
     title: 'Align',
-    options: ['inherit', 'left', 'center', 'right', 'justify'],
+    options: ['center', 'inherit', 'justify', 'left', 'right'],
   },
   color: {
     type: ControlType.Enum,
     title: 'Color',
     options: [
-      'initial',
+      'error',
       'inherit',
+      'initial',
       'primary',
       'secondary',
       'textPrimary',
       'textSecondary',
-      'error',
     ],
   },
   noWrap: {
@@ -79,20 +79,20 @@ addPropertyControls(Typography, {
     type: ControlType.Enum,
     title: 'Variant',
     options: [
+      'body1',
+      'body2',
+      'button',
+      'caption',
       'h1',
       'h2',
       'h3',
       'h4',
       'h5',
       'h6',
+      'inherit',
+      'overline',
       'subtitle1',
       'subtitle2',
-      'body1',
-      'body2',
-      'caption',
-      'button',
-      'overline',
-      'inherit',
     ],
   },
   label: {
diff --git a/framer/Material-UI.framerfx/package.json b/framer/Material-UI.framerfx/package.json
index 4a25c5b59d8dcd..481327a333e4ac 100644
--- a/framer/Material-UI.framerfx/package.json
+++ b/framer/Material-UI.framerfx/package.json
@@ -3,12 +3,12 @@
   "author": "Material-UI Team",
   "description": "Material-UI Framer components",
   "version": "1.1.0",
-  "main": "dist/index.js",
   "license": "MIT",
   "homepage": "http://material-ui.com/",
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui-org/material-ui.git"
+    "url": "https://github.com/mui-org/material-ui.git",
+    "directory": "framer/Material-UI.framerfx"
   },
   "bugs": {
     "url": "https://github.com/mui-org/material-ui/issues"
@@ -17,8 +17,8 @@
     "@types/react": "^16.8"
   },
   "dependencies": {
-    "@material-ui/core": "^4.9.3",
-    "@material-ui/icons": "^4.9.1",
+    "@material-ui/core": "^5.0.0-alpha.4",
+    "@material-ui/icons": "^5.0.0-alpha.4",
     "naming-style": "^1.0.0"
   },
   "peerDependencies": {
diff --git a/framer/package.json b/framer/package.json
index cfc3ca8335b773..064e740e026967 100644
--- a/framer/package.json
+++ b/framer/package.json
@@ -2,7 +2,6 @@
   "name": "framer",
   "version": "1.0.0",
   "description": "Builds Material-UI for Framer X",
-  "main": "index.js",
   "repository": "https://github.com/mui-org/material-ui",
   "author": "Material-UI Team",
   "license": "MIT",
@@ -18,6 +17,6 @@
     "build": "yarn build:core && yarn build:styles && yarn prettier",
     "build:core": "cross-env BABEL_ENV=test babel-node --config-file ../babel.config.js ./scripts/buildFramer.js ../packages/material-ui/src ./Material-UI.framerfx/code",
     "build:styles": "cross-env BABEL_ENV=test babel-node --config-file ../babel.config.js ./scripts/buildFramer.js ../packages/material-ui-styles/src ./Material-UI.framerfx/code",
-    "prettier": "prettier --write --config ../prettier.config.js' './**/*.{js,tsx}'"
+    "prettier": "prettier --write --config ../prettier.config.js './**/*.{js,tsx}'"
   }
 }
diff --git a/framer/scripts/buildFramer.js b/framer/scripts/buildFramer.js
index bb8cce774ee4b2..a8ddaa6ddb3d8d 100644
--- a/framer/scripts/buildFramer.js
+++ b/framer/scripts/buildFramer.js
@@ -156,7 +156,7 @@ function getTemplateStrings(reactAPI) {
       propTypeControls.name = 'boolean';
     }
 
-    const { name, value, hidden, title, ...other } = propTypeControls;
+    const { name, value, hidden, raw, title, ...other } = propTypeControls;
 
     if (!ignoredControls.includes(prop.name)) {
       controls += `
diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js
index f3b7f8c2faa682..eb465cd550e75d 100644
--- a/framer/scripts/framerConfig.js
+++ b/framer/scripts/framerConfig.js
@@ -66,7 +66,13 @@ export const componentSettings = {
     template: 'bottom_navigation.txt',
   },
   Button: {
-    ignoredProps: ['children', 'disableFocusRipple'],
+    ignoredProps: [
+      'children',
+      'disableFocusRipple',
+      // union not supported by framer ControlType
+      // interface, control types and default value need to be hardcoded
+      'variant',
+    ],
     propValues: {
       startIcon: "''",
       startIconTheme: 'Filled',
diff --git a/framer/scripts/templates/button.txt b/framer/scripts/templates/button.txt
index 691d15db136c57..5c9882ce80c440 100644
--- a/framer/scripts/templates/button.txt
+++ b/framer/scripts/templates/button.txt
@@ -8,10 +8,12 @@ import { Icon } from './Icon';
 
 interface Props {
 «& tsInterface»
+  variant?: 'contained' | 'outlined' | 'text';
 }
 
 const defaultProps: Props =  {
 «& defaultProps»
+  variant: 'text',
 };
 
 export const «componentName»: React.SFC<Props> = (props: Props) => {
@@ -43,4 +45,9 @@ export const «componentName»: React.SFC<Props> = (props: Props) => {
 
 addPropertyControls(«componentName», {
 «& propertyControls»
+  variant: {
+    type: ControlType.Enum,
+    title: 'Variant',
+    options: ['contained', 'outlined', 'text'],
+  },
 });