diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/input.tsx
index ee19cf1a8e94..65aba6f76e45 100644
--- a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/input.tsx
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/input.tsx
@@ -4,7 +4,7 @@ export interface ElemAProps {
   size?: 'a' | 'b' | 'c' | 'd';
 }
 
-export const Header: React.SFC<ElemAProps> = ({ size = 'a', children }) => (
+export const Header: React.FC<ElemAProps> = ({ size = 'a', children }) => (
   <div className={size}>{children}</div>
 );
 
@@ -12,7 +12,7 @@ export interface ElemBProps {
   size?: 'sm' | 'md' | 'lg';
 }
 
-export const Paragraph: React.SFC<ElemBProps> = ({ size, children }) => (
+export const Paragraph: React.FC<ElemBProps> = ({ size, children }) => (
   <div className={size}>{children}</div>
 );
 
diff --git a/docs/snippets/react/button-story-rename-story.ts.mdx b/docs/snippets/react/button-story-rename-story.ts.mdx
index 9ed0d10ff6bb..1503857ac1e9 100644
--- a/docs/snippets/react/button-story-rename-story.ts.mdx
+++ b/docs/snippets/react/button-story-rename-story.ts.mdx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { Button, ButtonProps } from './Button';
 
-export const Primary: React.SFC<{}> = () => <Button primary>Button</Button>;
+export const Primary: React.VFC<{}> = () => <Button primary>Button</Button>;
 
 Primary.storyName='I am the primary';
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx
index f4d758529a82..79bd51c6cfdc 100644
--- a/docs/snippets/react/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/react/button-story-with-emojis.ts.mdx
@@ -1,8 +1,8 @@
 ```ts
 // Button.stories.tsx
 
-export const Primary: React.SFC<{}> = () => <Button background="#ff0" label="Button" />;
-export const Secondary : React.SFC<{}> = () => <Button background="#ff0" label="😄👍😍💯" />;
-export const Tertiary: React.SFC<{}> = () => <Button background="#ff0" label="📚📕📈🤓" />;
+export const Primary: React.VFC<{}> = () => <Button background="#ff0" label="Button" />;
+export const Secondary: React.VFC<{}> = () => <Button background="#ff0" label="😄👍😍💯" />;
+export const Tertiary: React.VFC<{}> = () => <Button background="#ff0" label="📚📕📈🤓" />;
 
 ```
diff --git a/docs/snippets/react/button-story.ts.mdx b/docs/snippets/react/button-story.ts.mdx
index 4925c99643c9..bd05c39432f6 100644
--- a/docs/snippets/react/button-story.ts.mdx
+++ b/docs/snippets/react/button-story.ts.mdx
@@ -4,5 +4,5 @@
 import React from 'react';
 import { Button } from './Button';
 
-export const Primary: React.SFC<{}> = () => <Button primary>Button</Button>;
+export const Primary: React.VFC<{}> = () => <Button primary>Button</Button>;
 ```