From e3ef37cb0d787edf83114f819e523c0e1989e0f9 Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Thu, 27 Oct 2016 22:13:30 -0400
Subject: [PATCH] style(Button): update docs to the latest standards, add
 missing prop 'vertical' and delete one unused example

---
 ...xample.js => ButtonExampleConditionals.js} |  4 +-
 ...s => ButtonExampleMultipleConditionals.js} |  4 +-
 .../Examples/elements/Button/Content/index.js |  6 +--
 ...cExample.js => ButtonExampleGroupBasic.js} |  4 +-
 ...e.js => ButtonExampleGroupBasicColored.js} |  4 +-
 ...xample.js => ButtonExampleGroupColored.js} |  4 +-
 ...ple.js => ButtonExampleGroupEqualWidth.js} |  4 +-
 ...onExample.js => ButtonExampleGroupIcon.js} |  4 +-
 ....js => ButtonExampleGroupIconShorthand.js} |  4 +-
 ...ample.js => ButtonExampleGroupIconSize.js} |  4 +-
 ...le.js => ButtonExampleGroupLabeledIcon.js} |  4 +-
 ...dExample.js => ButtonExampleGroupMixed.js} |  4 +-
 ...Example.js => ButtonExampleGroupOrSize.js} |  4 +-
 ...zeExample.js => ButtonExampleGroupSize.js} |  4 +-
 ...ample.js => ButtonExampleGroupVertical.js} |  6 +--
 .../elements/Button/GroupVariations/index.js  | 42 +++++++--------
 ...nGroupExample.js => ButtonExampleGroup.js} |  4 +-
 ...onExample.js => ButtonExampleGroupIcon.js} |  4 +-
 .../Examples/elements/Button/Groups/index.js  |  8 +--
 ...ctiveExample.js => ButtonExampleActive.js} |  4 +-
 ...ledExample.js => ButtonExampleDisabled.js} |  4 +-
 ...dingExample.js => ButtonExampleLoading.js} |  4 +-
 .../Examples/elements/Button/States/index.js  | 12 ++---
 ...tedExample.js => ButtonExampleAnimated.js} |  4 +-
 ...nBasicExample.js => ButtonExampleBasic.js} |  4 +-
 ...uttonExample.js => ButtonExampleButton.js} |  4 +-
 ...Example.js => ButtonExampleContentProp.js} |  4 +-
 ...sisExample.js => ButtonExampleEmphasis.js} |  4 +-
 ...tonIconExample.js => ButtonExampleIcon.js} |  4 +-
 ...ropExample.js => ButtonExampleIconProp.js} |  4 +-
 ...tedExample.js => ButtonExampleInverted.js} |  4 +-
 ...eledExample.js => ButtonExampleLabeled.js} |  4 +-
 ...xample.js => ButtonExampleLabeledBasic.js} |  4 +-
 ...Example.js => ButtonExampleLabeledIcon.js} |  4 +-
 ...xample.js => ButtonExampleLabeledProps.js} |  4 +-
 .../Examples/elements/Button/Types/index.js   | 46 ++++++++--------
 ...larExample.js => ButtonExampleCircular.js} |  4 +-
 ...mple.js => ButtonExampleCircularSocial.js} |  4 +-
 ...oredExample.js => ButtonExampleColored.js} |  4 +-
 ...pactExample.js => ButtonExampleCompact.js} |  4 +-
 ...atedExample.js => ButtonExampleFloated.js} |  4 +-
 ...nFluidExample.js => ButtonExampleFluid.js} |  4 +-
 ...s => ButtonExampleHorizontallyAttached.js} |  4 +-
 ...iveExample.js => ButtonExampleNegative.js} |  4 +-
 ...iveExample.js => ButtonExamplePositive.js} |  4 +-
 ...tonSizeExample.js => ButtonExampleSize.js} |  4 +-
 ...ocialExample.js => ButtonExampleSocial.js} |  4 +-
 ...oggleExample.js => ButtonExampleToggle.js} |  4 +-
 ....js => ButtonExampleVerticallyAttached.js} |  4 +-
 ...> ButtonExampleVerticallyAttachedGroup.js} |  4 +-
 .../ButtonPositiveNegativeExample.js          | 11 ----
 .../elements/Button/Variations/index.js       | 52 +++++++++----------
 52 files changed, 174 insertions(+), 185 deletions(-)
 rename docs/app/Examples/elements/Button/Content/{ButtonConditionalsExample.js => ButtonExampleConditionals.js} (69%)
 rename docs/app/Examples/elements/Button/Content/{ButtonMultipleConditionalsExample.js => ButtonExampleMultipleConditionals.js} (69%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupBasicExample.js => ButtonExampleGroupBasic.js} (82%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupBasicColoredExample.js => ButtonExampleGroupBasicColored.js} (72%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupColoredExample.js => ButtonExampleGroupColored.js} (70%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupEqualWidthExample.js => ButtonExampleGroupEqualWidth.js} (83%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupIconExample.js => ButtonExampleGroupIcon.js} (78%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupIconShorthandExample.js => ButtonExampleGroupIconShorthand.js} (67%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupIconSizeExample.js => ButtonExampleGroupIconSize.js} (73%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupLabeledIconExample.js => ButtonExampleGroupLabeledIcon.js} (73%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupMixedExample.js => ButtonExampleGroupMixed.js} (78%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupOrSizeExample.js => ButtonExampleGroupOrSize.js} (70%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupSizeExample.js => ButtonExampleGroupSize.js} (72%)
 rename docs/app/Examples/elements/Button/GroupVariations/{ButtonGroupVerticalExample.js => ButtonExampleGroupVertical.js} (61%)
 rename docs/app/Examples/elements/Button/Groups/{ButtonGroupExample.js => ButtonExampleGroup.js} (71%)
 rename docs/app/Examples/elements/Button/Groups/{ButtonGroupIconExample.js => ButtonExampleGroupIcon.js} (83%)
 rename docs/app/Examples/elements/Button/States/{ButtonActiveExample.js => ButtonExampleActive.js} (59%)
 rename docs/app/Examples/elements/Button/States/{ButtonDisabledExample.js => ButtonExampleDisabled.js} (59%)
 rename docs/app/Examples/elements/Button/States/{ButtonLoadingExample.js => ButtonExampleLoading.js} (78%)
 rename docs/app/Examples/elements/Button/Types/{ButtonAnimatedExample.js => ButtonExampleAnimated.js} (89%)
 rename docs/app/Examples/elements/Button/Types/{ButtonBasicExample.js => ButtonExampleBasic.js} (91%)
 rename docs/app/Examples/elements/Button/Types/{ButtonButtonExample.js => ButtonExampleButton.js} (60%)
 rename docs/app/Examples/elements/Button/Types/{ButtonContentPropExample.js => ButtonExampleContentProp.js} (56%)
 rename docs/app/Examples/elements/Button/Types/{ButtonEmphasisExample.js => ButtonExampleEmphasis.js} (69%)
 rename docs/app/Examples/elements/Button/Types/{ButtonIconExample.js => ButtonExampleIcon.js} (66%)
 rename docs/app/Examples/elements/Button/Types/{ButtonIconPropExample.js => ButtonExampleIconProp.js} (56%)
 rename docs/app/Examples/elements/Button/Types/{ButtonInvertedExample.js => ButtonExampleInverted.js} (95%)
 rename docs/app/Examples/elements/Button/Types/{ButtonLabeledExample.js => ButtonExampleLabeled.js} (87%)
 rename docs/app/Examples/elements/Button/Types/{ButtonLabeledBasicExample.js => ButtonExampleLabeledBasic.js} (83%)
 rename docs/app/Examples/elements/Button/Types/{ButtonLabeledIconExample.js => ButtonExampleLabeledIcon.js} (73%)
 rename docs/app/Examples/elements/Button/Types/{ButtonLabeledPropsExample.js => ButtonExampleLabeledProps.js} (82%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonCircularExample.js => ButtonExampleCircular.js} (59%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonCircularSocialExample.js => ButtonExampleCircularSocial.js} (78%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonColoredExample.js => ButtonExampleColored.js} (89%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonCompactExample.js => ButtonExampleCompact.js} (67%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonFloatedExample.js => ButtonExampleFloated.js} (72%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonFluidExample.js => ButtonExampleFluid.js} (62%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonHorizontallyAttachedExample.js => ButtonExampleHorizontallyAttached.js} (64%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonNegativeExample.js => ButtonExampleNegative.js} (64%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonPositiveExample.js => ButtonExamplePositive.js} (64%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonSizeExample.js => ButtonExampleSize.js} (88%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonSocialExample.js => ButtonExampleSocial.js} (90%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonToggleExample.js => ButtonExampleToggle.js} (80%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonVerticallyAttachedExample.js => ButtonExampleVerticallyAttached.js} (75%)
 rename docs/app/Examples/elements/Button/Variations/{ButtonVerticallyAttachedGroupExample.js => ButtonExampleVerticallyAttachedGroup.js} (80%)
 delete mode 100644 docs/app/Examples/elements/Button/Variations/ButtonPositiveNegativeExample.js

diff --git a/docs/app/Examples/elements/Button/Content/ButtonConditionalsExample.js b/docs/app/Examples/elements/Button/Content/ButtonExampleConditionals.js
similarity index 69%
rename from docs/app/Examples/elements/Button/Content/ButtonConditionalsExample.js
rename to docs/app/Examples/elements/Button/Content/ButtonExampleConditionals.js
index d57db05199..510d706473 100644
--- a/docs/app/Examples/elements/Button/Content/ButtonConditionalsExample.js
+++ b/docs/app/Examples/elements/Button/Content/ButtonExampleConditionals.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonConditionalsExample = () => (
+const ButtonExampleConditionals = () => (
   <Button.Group>
     <Button>Cancel</Button>
     <Button.Or />
@@ -9,4 +9,4 @@ const ButtonConditionalsExample = () => (
   </Button.Group>
 )
 
-export default ButtonConditionalsExample
+export default ButtonExampleConditionals
diff --git a/docs/app/Examples/elements/Button/Content/ButtonMultipleConditionalsExample.js b/docs/app/Examples/elements/Button/Content/ButtonExampleMultipleConditionals.js
similarity index 69%
rename from docs/app/Examples/elements/Button/Content/ButtonMultipleConditionalsExample.js
rename to docs/app/Examples/elements/Button/Content/ButtonExampleMultipleConditionals.js
index 940c592d14..54277125ba 100644
--- a/docs/app/Examples/elements/Button/Content/ButtonMultipleConditionalsExample.js
+++ b/docs/app/Examples/elements/Button/Content/ButtonExampleMultipleConditionals.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonMultipleConditionalsExample = () => (
+const ButtonExampleMultipleConditionals = () => (
   <Button.Group>
     <Button>One</Button>
     <Button.Or />
@@ -11,4 +11,4 @@ const ButtonMultipleConditionalsExample = () => (
   </Button.Group>
 )
 
-export default ButtonMultipleConditionalsExample
+export default ButtonExampleMultipleConditionals
diff --git a/docs/app/Examples/elements/Button/Content/index.js b/docs/app/Examples/elements/Button/Content/index.js
index 8efc795643..0a7160f093 100644
--- a/docs/app/Examples/elements/Button/Content/index.js
+++ b/docs/app/Examples/elements/Button/Content/index.js
@@ -6,11 +6,11 @@ const ButtonContentExamples = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Conditionals'
-      description='Button groups can contain conditionals'
-      examplePath='elements/Button/Content/ButtonConditionalsExample'
+      description='Button groups can contain conditionals.'
+      examplePath='elements/Button/Content/ButtonExampleConditionals'
     />
     <ComponentExample
-      examplePath='elements/Button/Content/ButtonMultipleConditionalsExample'
+      examplePath='elements/Button/Content/ButtonExampleMultipleConditionals'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js
similarity index 82%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js
index bbe7a36411..5ed114ec7d 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Divider } from 'semantic-ui-react'
 
-const ButtonGroupBasicExample = () => (
+const ButtonExampleGroupBasic = () => (
   <div>
     <Button.Group basic>
       <Button>One</Button>
@@ -17,4 +17,4 @@ const ButtonGroupBasicExample = () => (
   </div>
 )
 
-export default ButtonGroupBasicExample
+export default ButtonExampleGroupBasic
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicColoredExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupBasicColored.js
similarity index 72%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicColoredExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupBasicColored.js
index 1927f0b14b..889de08f5a 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicColoredExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupBasicColored.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupBasicColoredExample = () => (
+const ButtonExampleGroupBasicColored = () => (
   <Button.Group>
     <Button basic color='red'>One</Button>
     <Button basic color='green'>Two</Button>
@@ -9,4 +9,4 @@ const ButtonGroupBasicColoredExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupBasicColoredExample
+export default ButtonExampleGroupBasicColored
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupColoredExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js
similarity index 70%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupColoredExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js
index 030dee3ba4..9b7632e61e 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupColoredExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupColoredExample = () => (
+const ButtonExampleGroupColored = () => (
   <Button.Group color='blue'>
     <Button>One</Button>
     <Button>Two</Button>
@@ -9,4 +9,4 @@ const ButtonGroupColoredExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupColoredExample
+export default ButtonExampleGroupColored
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupEqualWidthExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js
similarity index 83%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupEqualWidthExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js
index 9052de867c..9e9b3b0359 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupEqualWidthExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Divider } from 'semantic-ui-react'
 
-const ButtonGroupEqualWidthExample = () => (
+const ButtonExampleGroupEqualWidth = () => (
   <div>
     <Button.Group widths='5'>
       <Button>Overview</Button>
@@ -19,4 +19,4 @@ const ButtonGroupEqualWidthExample = () => (
   </div>
 )
 
-export default ButtonGroupEqualWidthExample
+export default ButtonExampleGroupEqualWidth
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js
similarity index 78%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js
index ea2d9cb33b..8b171e62c6 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Icon } from 'semantic-ui-react'
 
-const ButtonGroupIconExample = () => (
+const ButtonExampleGroupIcon = () => (
   <Button.Group icon>
     <Button>
       <Icon name='play' />
@@ -15,4 +15,4 @@ const ButtonGroupIconExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupIconExample
+export default ButtonExampleGroupIcon
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconShorthandExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js
similarity index 67%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconShorthandExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js
index 3c91961cb7..5417e9ca04 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconShorthandExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupIconShorthandExample = () => (
+const ButtonExampleGroupIconShorthand = () => (
   <Button.Group>
     <Button icon='play' />
     <Button icon='pause' />
@@ -9,4 +9,4 @@ const ButtonGroupIconShorthandExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupIconShorthandExample
+export default ButtonExampleGroupIconShorthand
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconSizeExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js
similarity index 73%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconSizeExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js
index 044e33f425..3f883948ac 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconSizeExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupIconSizeExample = () => (
+const ButtonExampleGroupIconSize = () => (
   <Button.Group basic size='small'>
     <Button icon='file' />
     <Button icon='save' />
@@ -10,4 +10,4 @@ const ButtonGroupIconSizeExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupIconSizeExample
+export default ButtonExampleGroupIconSize
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupLabeledIconExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js
similarity index 73%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupLabeledIconExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js
index 2ee26762b7..3107b7fbf9 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupLabeledIconExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupLabeledIconExample = () => (
+const ButtonExampleGroupLabeledIcon = () => (
   <Button.Group labeled>
     <Button icon='play' content='Play' />
     <Button icon='pause' content='Pause' />
@@ -9,4 +9,4 @@ const ButtonGroupLabeledIconExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupLabeledIconExample
+export default ButtonExampleGroupLabeledIcon
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupMixedExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js
similarity index 78%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupMixedExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js
index e2fc3556aa..203257ac05 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupMixedExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupMixedExample = () => (
+const ButtonExampleGroupMixed = () => (
   <Button.Group>
     <Button labelPosition='left' icon='left chevron' content='Back' />
     <Button icon='stop' content='Stop' />
@@ -9,4 +9,4 @@ const ButtonGroupMixedExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupMixedExample
+export default ButtonExampleGroupMixed
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupOrSizeExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js
similarity index 70%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupOrSizeExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js
index 29b7716253..a396480396 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupOrSizeExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupOrSizeExample = () => (
+const ButtonExampleGroupOrSize = () => (
   <Button.Group size='large'>
     <Button>One</Button>
     <Button.Or />
@@ -9,4 +9,4 @@ const ButtonGroupOrSizeExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupOrSizeExample
+export default ButtonExampleGroupOrSize
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupSizeExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js
similarity index 72%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupSizeExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js
index 1dfe2bbaca..4b048afcef 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupSizeExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupSizeExample = () => (
+const ButtonExampleGroupSize = () => (
   <Button.Group size='large'>
     <Button>One</Button>
     <Button>Two</Button>
@@ -9,4 +9,4 @@ const ButtonGroupSizeExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupSizeExample
+export default ButtonExampleGroupSize
diff --git a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupVerticalExample.js b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js
similarity index 61%
rename from docs/app/Examples/elements/Button/GroupVariations/ButtonGroupVerticalExample.js
rename to docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js
index 40698dd884..a6212173da 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/ButtonGroupVerticalExample.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupVerticalExample = () => (
-  <Button.Group attached='top'>
+const ButtonExampleGroupVertical = () => (
+  <Button.Group attached='top' vertical>
     <Button>Feed</Button>
     <Button>Messages</Button>
     <Button>Events</Button>
@@ -10,4 +10,4 @@ const ButtonGroupVerticalExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupVerticalExample
+export default ButtonExampleGroupVertical
diff --git a/docs/app/Examples/elements/Button/GroupVariations/index.js b/docs/app/Examples/elements/Button/GroupVariations/index.js
index b5ca3f9ea8..55a136d170 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/index.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/index.js
@@ -6,56 +6,56 @@ const ButtonGroupVariationsExamples = () => (
   <ExampleSection title='Group Variations'>
     <ComponentExample
       title='Vertical Group'
-      description='Groups can be formatted to appear vertically'
-      examplePath='elements/Button/GroupVariations/ButtonGroupVerticalExample'
+      description='Groups can be formatted to appear vertically.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupVertical'
     />
     <ComponentExample
       title='Icon Group'
-      description='Groups can be formatted as icons'
-      examplePath='elements/Button/GroupVariations/ButtonGroupIconExample'
+      description='Groups can be formatted as icons.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupIcon'
     />
     <ComponentExample
-      description='Using shorthand icons formats each individual button as an icon button'
-      examplePath='elements/Button/GroupVariations/ButtonGroupIconShorthandExample'
+      description='Using shorthand icons formats each individual button as an icon button.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupIconShorthand'
     />
     <ComponentExample
       title='Labeled Icon Groups'
-      description='Groups can be formatted as labeled icons'
-      examplePath='elements/Button/GroupVariations/ButtonGroupLabeledIconExample'
+      description='Groups can be formatted as labeled icons.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon'
     />
     <ComponentExample
       title='Mixed Group'
-      description='Groups can be formatted to use multiple button types together'
-      examplePath='elements/Button/GroupVariations/ButtonGroupMixedExample'
+      description='Groups can be formatted to use multiple button types together.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupMixed'
     />
     <ComponentExample
       title='Equal Width'
-      description='Groups can have their widths divided evenly'
-      examplePath='elements/Button/GroupVariations/ButtonGroupEqualWidthExample'
+      description='Groups can have their widths divided evenly.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupEqualWidth'
     />
     <ComponentExample
       title='Colored Group'
-      description='Groups can have a shared color'
-      examplePath='elements/Button/GroupVariations/ButtonGroupColoredExample'
+      description='Groups can have a shared color.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupColored'
     />
     <ComponentExample
       title='Basic Group'
-      description='A button group can be less pronounced'
-      examplePath='elements/Button/GroupVariations/ButtonGroupBasicExample'
+      description='A button group can be less pronounced.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupBasic'
     />
     <ComponentExample
-      examplePath='elements/Button/GroupVariations/ButtonGroupBasicColoredExample'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupBasicColored'
     />
     <ComponentExample
       title='Group Sizes'
-      description='Groups can have a shared size'
-      examplePath='elements/Button/GroupVariations/ButtonGroupSizeExample'
+      description='Groups can have a shared size.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupSize'
     />
     <ComponentExample
-      examplePath='elements/Button/GroupVariations/ButtonGroupIconSizeExample'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupIconSize'
     />
     <ComponentExample
-      examplePath='elements/Button/GroupVariations/ButtonGroupOrSizeExample'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupOrSize'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonGroupExample.js b/docs/app/Examples/elements/Button/Groups/ButtonExampleGroup.js
similarity index 71%
rename from docs/app/Examples/elements/Button/Groups/ButtonGroupExample.js
rename to docs/app/Examples/elements/Button/Groups/ButtonExampleGroup.js
index 1676ee61fa..f37220641b 100644
--- a/docs/app/Examples/elements/Button/Groups/ButtonGroupExample.js
+++ b/docs/app/Examples/elements/Button/Groups/ButtonExampleGroup.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonButtonsExample = () => (
+const ButtonExampleGroup = () => (
   <Button.Group>
     <Button>One</Button>
     <Button>Two</Button>
@@ -9,4 +9,4 @@ const ButtonButtonsExample = () => (
   </Button.Group>
 )
 
-export default ButtonButtonsExample
+export default ButtonExampleGroup
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonGroupIconExample.js b/docs/app/Examples/elements/Button/Groups/ButtonExampleGroupIcon.js
similarity index 83%
rename from docs/app/Examples/elements/Button/Groups/ButtonGroupIconExample.js
rename to docs/app/Examples/elements/Button/Groups/ButtonExampleGroupIcon.js
index 210a59493d..994389650d 100644
--- a/docs/app/Examples/elements/Button/Groups/ButtonGroupIconExample.js
+++ b/docs/app/Examples/elements/Button/Groups/ButtonExampleGroupIcon.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonIconButtonsExample = () => (
+const ButtonExampleGroupIcon = () => (
   <div>
     <Button.Group>
       <Button icon='align left' />
@@ -18,4 +18,4 @@ const ButtonIconButtonsExample = () => (
   </div>
 )
 
-export default ButtonIconButtonsExample
+export default ButtonExampleGroupIcon
diff --git a/docs/app/Examples/elements/Button/Groups/index.js b/docs/app/Examples/elements/Button/Groups/index.js
index e7979c8ac2..6c0dd9d317 100644
--- a/docs/app/Examples/elements/Button/Groups/index.js
+++ b/docs/app/Examples/elements/Button/Groups/index.js
@@ -6,13 +6,13 @@ const ButtonGroupsExamples = () => (
   <ExampleSection title='Groups'>
     <ComponentExample
       title='Group'
-      description='Buttons can exist together as a group'
-      examplePath='elements/Button/Groups/ButtonGroupExample'
+      description='Buttons can exist together as a group.'
+      examplePath='elements/Button/Groups/ButtonExampleGroup'
     />
     <ComponentExample
       title='Icon Group'
-      description='Button groups can show groups of icons'
-      examplePath='elements/Button/Groups/ButtonGroupIconExample'
+      description='Button groups can show groups of icons.'
+      examplePath='elements/Button/Groups/ButtonExampleGroupIcon'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/elements/Button/States/ButtonActiveExample.js b/docs/app/Examples/elements/Button/States/ButtonExampleActive.js
similarity index 59%
rename from docs/app/Examples/elements/Button/States/ButtonActiveExample.js
rename to docs/app/Examples/elements/Button/States/ButtonExampleActive.js
index 6de81826ea..00b26ecfbb 100644
--- a/docs/app/Examples/elements/Button/States/ButtonActiveExample.js
+++ b/docs/app/Examples/elements/Button/States/ButtonExampleActive.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonActiveExample = () => (
+const ButtonExampleActive = () => (
   <Button active>Active</Button>
 )
 
-export default ButtonActiveExample
+export default ButtonExampleActive
diff --git a/docs/app/Examples/elements/Button/States/ButtonDisabledExample.js b/docs/app/Examples/elements/Button/States/ButtonExampleDisabled.js
similarity index 59%
rename from docs/app/Examples/elements/Button/States/ButtonDisabledExample.js
rename to docs/app/Examples/elements/Button/States/ButtonExampleDisabled.js
index f8c76b063d..d4656ba99f 100644
--- a/docs/app/Examples/elements/Button/States/ButtonDisabledExample.js
+++ b/docs/app/Examples/elements/Button/States/ButtonExampleDisabled.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonDisabledExample = () => (
+const ButtonExampleDisabled = () => (
   <Button disabled>Disabled</Button>
 )
 
-export default ButtonDisabledExample
+export default ButtonExampleDisabled
diff --git a/docs/app/Examples/elements/Button/States/ButtonLoadingExample.js b/docs/app/Examples/elements/Button/States/ButtonExampleLoading.js
similarity index 78%
rename from docs/app/Examples/elements/Button/States/ButtonLoadingExample.js
rename to docs/app/Examples/elements/Button/States/ButtonExampleLoading.js
index 24b6240108..dd22c7470f 100644
--- a/docs/app/Examples/elements/Button/States/ButtonLoadingExample.js
+++ b/docs/app/Examples/elements/Button/States/ButtonExampleLoading.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonLoadingExample = () => (
+const ButtonExampleLoading = () => (
   <div>
     <Button loading>Loading</Button>
     <Button basic loading>Loading</Button>
@@ -10,4 +10,4 @@ const ButtonLoadingExample = () => (
   </div>
 )
 
-export default ButtonLoadingExample
+export default ButtonExampleLoading
diff --git a/docs/app/Examples/elements/Button/States/index.js b/docs/app/Examples/elements/Button/States/index.js
index 1de332798c..7622648b6b 100644
--- a/docs/app/Examples/elements/Button/States/index.js
+++ b/docs/app/Examples/elements/Button/States/index.js
@@ -6,18 +6,18 @@ const ButtonStatesExamples = () => (
   <ExampleSection title='States'>
     <ComponentExample
       title='Active'
-      description='A button can show it is currently the active user selection'
-      examplePath='elements/Button/States/ButtonActiveExample'
+      description='A button can show it is currently the active user selection.'
+      examplePath='elements/Button/States/ButtonExampleActive'
     />
     <ComponentExample
       title='Disabled'
-      description='A button can show it is currently unable to be interacted with'
-      examplePath='elements/Button/States/ButtonDisabledExample'
+      description='A button can show it is currently unable to be interacted with.'
+      examplePath='elements/Button/States/ButtonExampleDisabled'
     />
     <ComponentExample
       title='Loading'
-      description='A button can show a loading indicator'
-      examplePath='elements/Button/States/ButtonLoadingExample'
+      description='A button can show a loading indicator.'
+      examplePath='elements/Button/States/ButtonExampleLoading'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleAnimated.js
similarity index 89%
rename from docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleAnimated.js
index 62fd80e1f5..36f394851d 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleAnimated.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Icon } from 'semantic-ui-react'
 
-const ButtonAnimatedExample = () => (
+const ButtonExampleAnimated = () => (
   <div>
     <Button animated>
       <Button.Content visible>Next</Button.Content>
@@ -28,4 +28,4 @@ const ButtonAnimatedExample = () => (
   </div>
 )
 
-export default ButtonAnimatedExample
+export default ButtonExampleAnimated
diff --git a/docs/app/Examples/elements/Button/Types/ButtonBasicExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleBasic.js
similarity index 91%
rename from docs/app/Examples/elements/Button/Types/ButtonBasicExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleBasic.js
index 5182bbcb8f..67828836fe 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonBasicExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleBasic.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonBasicExample = () => (
+const ButtonExampleBasic = () => (
   <div>
     <Button basic>Standard</Button>
     <Button basic color='red'>Red</Button>
@@ -20,4 +20,4 @@ const ButtonBasicExample = () => (
   </div>
 )
 
-export default ButtonBasicExample
+export default ButtonExampleBasic
diff --git a/docs/app/Examples/elements/Button/Types/ButtonButtonExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleButton.js
similarity index 60%
rename from docs/app/Examples/elements/Button/Types/ButtonButtonExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleButton.js
index a40d92be11..7093a66b0f 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonButtonExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleButton.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonButtonExample = () => (
+const ButtonExampleButton = () => (
   <Button>
     Click Here
   </Button>
 )
 
-export default ButtonButtonExample
+export default ButtonExampleButton
diff --git a/docs/app/Examples/elements/Button/Types/ButtonContentPropExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleContentProp.js
similarity index 56%
rename from docs/app/Examples/elements/Button/Types/ButtonContentPropExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleContentProp.js
index 075895224f..5f04ad10e8 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonContentPropExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleContentProp.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonContentPropExample = () => (
+const ButtonExampleContentProp = () => (
   <Button content='Click Here' />
 )
 
-export default ButtonContentPropExample
+export default ButtonExampleContentProp
diff --git a/docs/app/Examples/elements/Button/Types/ButtonEmphasisExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleEmphasis.js
similarity index 69%
rename from docs/app/Examples/elements/Button/Types/ButtonEmphasisExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleEmphasis.js
index c94fd030e4..474d00f41a 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonEmphasisExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleEmphasis.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonEmphasisExample = () => (
+const ButtonExampleEmphasis = () => (
   <div>
     <Button primary>Primary</Button>
     <Button secondary>Secondary</Button>
   </div>
 )
 
-export default ButtonEmphasisExample
+export default ButtonExampleEmphasis
diff --git a/docs/app/Examples/elements/Button/Types/ButtonIconExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleIcon.js
similarity index 66%
rename from docs/app/Examples/elements/Button/Types/ButtonIconExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleIcon.js
index 31c767d8b0..12ea4af6b0 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonIconExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleIcon.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Button, Icon } from 'semantic-ui-react'
 
-const ButtonIconExample = () => (
+const ButtonExampleIcon = () => (
   <Button icon>
     <Icon name='world' />
   </Button>
 )
 
-export default ButtonIconExample
+export default ButtonExampleIcon
diff --git a/docs/app/Examples/elements/Button/Types/ButtonIconPropExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleIconProp.js
similarity index 56%
rename from docs/app/Examples/elements/Button/Types/ButtonIconPropExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleIconProp.js
index 06c6cba1ab..4b0b45bdc7 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonIconPropExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleIconProp.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonIconExample = () => (
+const ButtonExampleIconProp = () => (
   <Button icon='world' />
 )
 
-export default ButtonIconExample
+export default ButtonExampleIconProp
diff --git a/docs/app/Examples/elements/Button/Types/ButtonInvertedExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleInverted.js
similarity index 95%
rename from docs/app/Examples/elements/Button/Types/ButtonInvertedExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleInverted.js
index b3b6bfe92b..afab7b1e26 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonInvertedExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleInverted.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Segment } from 'semantic-ui-react'
 
-const ButtonInvertedExample = () => (
+const ButtonExampleInverted = () => (
   <div>
     <Segment inverted>
       <Button inverted>Standard</Button>
@@ -38,4 +38,4 @@ const ButtonInvertedExample = () => (
   </div>
 )
 
-export default ButtonInvertedExample
+export default ButtonExampleInverted
diff --git a/docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleLabeled.js
similarity index 87%
rename from docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleLabeled.js
index fe202cae00..1a08692d19 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleLabeled.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonLabeledExample = () => (
+const ButtonExampleLabeled = () => (
   <div>
     <Button
       content='Like'
@@ -25,4 +25,4 @@ const ButtonLabeledExample = () => (
   </div>
 )
 
-export default ButtonLabeledExample
+export default ButtonExampleLabeled
diff --git a/docs/app/Examples/elements/Button/Types/ButtonLabeledBasicExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleLabeledBasic.js
similarity index 83%
rename from docs/app/Examples/elements/Button/Types/ButtonLabeledBasicExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleLabeledBasic.js
index 3ee611e9fe..236303bab6 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonLabeledBasicExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleLabeledBasic.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonLabeledExample = () => (
+const ButtonExampleLabeledBasic = () => (
   <div>
     <Button
       color='red'
@@ -20,4 +20,4 @@ const ButtonLabeledExample = () => (
   </div>
 )
 
-export default ButtonLabeledExample
+export default ButtonExampleLabeledBasic
diff --git a/docs/app/Examples/elements/Button/Types/ButtonLabeledIconExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleLabeledIcon.js
similarity index 73%
rename from docs/app/Examples/elements/Button/Types/ButtonLabeledIconExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleLabeledIcon.js
index 982becf44e..52b2661468 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonLabeledIconExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleLabeledIcon.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonLabeledIconExample = () => (
+const ButtonExampleLabeledIcon = () => (
   <div>
     <Button content='Pause' icon='pause' labelPosition='left' />
     <Button content='Next' icon='right arrow' labelPosition='right' />
   </div>
 )
 
-export default ButtonLabeledIconExample
+export default ButtonExampleLabeledIcon
diff --git a/docs/app/Examples/elements/Button/Types/ButtonLabeledPropsExample.js b/docs/app/Examples/elements/Button/Types/ButtonExampleLabeledProps.js
similarity index 82%
rename from docs/app/Examples/elements/Button/Types/ButtonLabeledPropsExample.js
rename to docs/app/Examples/elements/Button/Types/ButtonExampleLabeledProps.js
index 3ffe0a0d26..d19d5bf384 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonLabeledPropsExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonExampleLabeledProps.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Label } from 'semantic-ui-react'
 
-const ButtonLabeledPropsExample = () => (
+const ButtonExampleLabeledProps = () => (
   <div>
     <Button label={1048} icon='fork' labelPosition='left' />
     <Button label='1,048' icon='fork' labelPosition='left' />
@@ -10,4 +10,4 @@ const ButtonLabeledPropsExample = () => (
   </div>
 )
 
-export default ButtonLabeledPropsExample
+export default ButtonExampleLabeledProps
diff --git a/docs/app/Examples/elements/Button/Types/index.js b/docs/app/Examples/elements/Button/Types/index.js
index e55f660804..b952edef30 100644
--- a/docs/app/Examples/elements/Button/Types/index.js
+++ b/docs/app/Examples/elements/Button/Types/index.js
@@ -6,58 +6,58 @@ const ButtonTypesExamples = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Button'
-      description='A standard button'
-      examplePath='elements/Button/Types/ButtonButtonExample'
+      description='A standard button.'
+      examplePath='elements/Button/Types/ButtonExampleButton'
     />
     <ComponentExample
-      description='Button content can also be defined with props'
-      examplePath='elements/Button/Types/ButtonContentPropExample'
+      description='Button content can also be defined with props.'
+      examplePath='elements/Button/Types/ButtonExampleContentProp'
     />
     <ComponentExample
       title='Emphasis'
-      description='A button can be formatted to show different levels of emphasis'
-      examplePath='elements/Button/Types/ButtonEmphasisExample'
+      description='A button can be formatted to show different levels of emphasis.'
+      examplePath='elements/Button/Types/ButtonExampleEmphasis'
     />
     <ComponentExample
       title='Animated'
-      description='Buttons can animate to show additional or hidden content'
-      examplePath='elements/Button/Types/ButtonAnimatedExample'
+      description='Buttons can animate to show additional or hidden content.'
+      examplePath='elements/Button/Types/ButtonExampleAnimated'
     />
     <ComponentExample
       title='Labeled'
-      description='A button can be accompanied by a label'
-      examplePath='elements/Button/Types/ButtonLabeledExample'
+      description='A button can be accompanied by a label.'
+      examplePath='elements/Button/Types/ButtonExampleLabeled'
     />
     <ComponentExample
-      examplePath='elements/Button/Types/ButtonLabeledBasicExample'
+      examplePath='elements/Button/Types/ButtonExampleLabeledBasic'
     />
     <ComponentExample
-      description='You can also configure the markup with props'
-      examplePath='elements/Button/Types/ButtonLabeledPropsExample'
+      description='You can also configure the markup with props.'
+      examplePath='elements/Button/Types/ButtonExampleLabeledProps'
     />
     <ComponentExample
       title='Icon'
-      description='A button can be made of only an icon'
-      examplePath='elements/Button/Types/ButtonIconExample'
+      description='A button can be made of only an icon.'
+      examplePath='elements/Button/Types/ButtonExampleIcon'
     />
     <ComponentExample
-      description='You can also define an icon button with props'
-      examplePath='elements/Button/Types/ButtonIconPropExample'
+      description='You can also define an icon button with props.'
+      examplePath='elements/Button/Types/ButtonExampleIconProp'
     />
     <ComponentExample
       title='Labeled Icon'
-      description='A button can use an icon as a label'
-      examplePath='elements/Button/Types/ButtonLabeledIconExample'
+      description='A button can use an icon as a label.'
+      examplePath='elements/Button/Types/ButtonExampleLabeledIcon'
     />
     <ComponentExample
       title='Basic'
-      description='The basic button has a subtle appearance'
-      examplePath='elements/Button/Types/ButtonBasicExample'
+      description='The basic button has a subtle appearance.'
+      examplePath='elements/Button/Types/ButtonExampleBasic'
     />
     <ComponentExample
       title='Inverted'
-      description='A button can be formatted to appear on a dark background'
-      examplePath='elements/Button/Types/ButtonInvertedExample'
+      description='A button can be formatted to appear on a dark background.'
+      examplePath='elements/Button/Types/ButtonExampleInverted'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonCircularExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleCircular.js
similarity index 59%
rename from docs/app/Examples/elements/Button/Variations/ButtonCircularExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleCircular.js
index b6d5defdb3..9e58623975 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonCircularExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleCircular.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonCircularExample = () => (
+const ButtonExampleCircular = () => (
   <Button circular icon='settings' />
 )
 
-export default ButtonCircularExample
+export default ButtonExampleCircular
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonCircularSocialExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleCircularSocial.js
similarity index 78%
rename from docs/app/Examples/elements/Button/Variations/ButtonCircularSocialExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleCircularSocial.js
index 0d6a115429..588b9f9c60 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonCircularSocialExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleCircularSocial.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonCircularExample = () => (
+const ButtonExampleCircularSocial = () => (
   <div>
     <Button circular color='facebook' icon='facebook' />
     <Button circular color='twitter' icon='twitter' />
@@ -10,4 +10,4 @@ const ButtonCircularExample = () => (
   </div>
 )
 
-export default ButtonCircularExample
+export default ButtonExampleCircularSocial
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonColoredExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleColored.js
similarity index 89%
rename from docs/app/Examples/elements/Button/Variations/ButtonColoredExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleColored.js
index 8b25f0ae54..9ad2642205 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonColoredExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleColored.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonColoredExample = () => (
+const ButtonExampleColored = () => (
   <div>
     <Button color='red'>Red</Button>
     <Button color='orange'>Orange</Button>
@@ -19,4 +19,4 @@ const ButtonColoredExample = () => (
   </div>
 )
 
-export default ButtonColoredExample
+export default ButtonExampleColored
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonCompactExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleCompact.js
similarity index 67%
rename from docs/app/Examples/elements/Button/Variations/ButtonCompactExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleCompact.js
index 5e66b82c22..48d6184827 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonCompactExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleCompact.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonCompactExample = () => (
+const ButtonExampleCompact = () => (
   <div>
     <Button compact>Compact</Button>
     <Button>Normal</Button>
   </div>
 )
 
-export default ButtonCompactExample
+export default ButtonExampleCompact
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonFloatedExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleFloated.js
similarity index 72%
rename from docs/app/Examples/elements/Button/Variations/ButtonFloatedExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleFloated.js
index 01a93712ac..96ef60d242 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonFloatedExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleFloated.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonFloatedExample = () => (
+const ButtonExampleFloated = () => (
   <div>
     <Button floated='right'>Right Floated</Button>
     <Button floated='left'>Left Floated</Button>
   </div>
 )
 
-export default ButtonFloatedExample
+export default ButtonExampleFloated
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonFluidExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleFluid.js
similarity index 62%
rename from docs/app/Examples/elements/Button/Variations/ButtonFluidExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleFluid.js
index 290a60a3e6..55a4144c39 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonFluidExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleFluid.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonFluidExample = () => (
+const ButtonExampleFluid = () => (
   <Button fluid>Fits to Container</Button>
 )
 
-export default ButtonFluidExample
+export default ButtonExampleFluid
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonHorizontallyAttachedExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleHorizontallyAttached.js
similarity index 64%
rename from docs/app/Examples/elements/Button/Variations/ButtonHorizontallyAttachedExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleHorizontallyAttached.js
index 6393d55602..c8ed5ecaf6 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonHorizontallyAttachedExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleHorizontallyAttached.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonHorizontallyAttachedExample = () => (
+const ButtonExampleHorizontallyAttached = () => (
   <div>
     <Button attached='left'>Left</Button>
     <Button attached='right'>Right</Button>
   </div>
 )
 
-export default ButtonHorizontallyAttachedExample
+export default ButtonExampleHorizontallyAttached
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonNegativeExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleNegative.js
similarity index 64%
rename from docs/app/Examples/elements/Button/Variations/ButtonNegativeExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleNegative.js
index 1eb62ca711..90d1c79756 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonNegativeExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleNegative.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonNegativeExample = () => (
+const ButtonExampleNegative = () => (
   <div>
     <Button negative>Negative Button</Button>
   </div>
 )
 
-export default ButtonNegativeExample
+export default ButtonExampleNegative
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonPositiveExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExamplePositive.js
similarity index 64%
rename from docs/app/Examples/elements/Button/Variations/ButtonPositiveExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExamplePositive.js
index 314c5fd436..adf366d891 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonPositiveExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExamplePositive.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonPositiveExample = () => (
+const ButtonExamplePositive = () => (
   <div>
     <Button positive>Positive Button</Button>
   </div>
 )
 
-export default ButtonPositiveExample
+export default ButtonExamplePositive
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonSizeExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleSize.js
similarity index 88%
rename from docs/app/Examples/elements/Button/Variations/ButtonSizeExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleSize.js
index bf8947cfbe..7d6f3d20a3 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonSizeExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonSizeExample = () => (
+const ButtonExampleSize = () => (
   <div>
     <Button size='mini'>
       Mini
@@ -30,4 +30,4 @@ const ButtonSizeExample = () => (
   </div>
 )
 
-export default ButtonSizeExample
+export default ButtonExampleSize
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonSocialExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleSocial.js
similarity index 90%
rename from docs/app/Examples/elements/Button/Variations/ButtonSocialExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleSocial.js
index ce9c7f1598..82796d9b5d 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonSocialExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleSocial.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Icon } from 'semantic-ui-react'
 
-const ButtonSocialExample = () => (
+const ButtonExampleSocial = () => (
   <div>
     <Button color='facebook'>
       <Icon name='facebook' /> Facebook
@@ -27,4 +27,4 @@ const ButtonSocialExample = () => (
   </div>
 )
 
-export default ButtonSocialExample
+export default ButtonExampleSocial
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonToggleExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleToggle.js
similarity index 80%
rename from docs/app/Examples/elements/Button/Variations/ButtonToggleExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleToggle.js
index 9838f0b97c..439a85e5a9 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonToggleExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleToggle.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Button } from 'semantic-ui-react'
 
-class ButtonToggleExample extends Component {
+class ButtonExampleToggle extends Component {
   state = {}
 
   handleClick = () => this.setState({ active: !this.state.active })
@@ -16,4 +16,4 @@ class ButtonToggleExample extends Component {
   }
 }
 
-export default ButtonToggleExample
+export default ButtonExampleToggle
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleVerticallyAttached.js
similarity index 75%
rename from docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleVerticallyAttached.js
index fad296c967..e0315d68c7 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleVerticallyAttached.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Segment } from 'semantic-ui-react'
 
-const ButtonVerticallyAttachedExample = () => (
+const ButtonExampleVerticallyAttached = () => (
   <div>
     <Button attached='top'>Top</Button>
     <Segment attached>
@@ -11,4 +11,4 @@ const ButtonVerticallyAttachedExample = () => (
   </div>
 )
 
-export default ButtonVerticallyAttachedExample
+export default ButtonExampleVerticallyAttached
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedGroupExample.js b/docs/app/Examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
similarity index 80%
rename from docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedGroupExample.js
rename to docs/app/Examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
index 435b46192e..07e94b6d19 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedGroupExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Segment } from 'semantic-ui-react'
 
-const ButtonVerticallyAttachedExample = () => (
+const ButtonExampleVerticallyAttachedGroup = () => (
   <div>
     <Button.Group attached='top'>
       <Button>One</Button>
@@ -17,4 +17,4 @@ const ButtonVerticallyAttachedExample = () => (
   </div>
 )
 
-export default ButtonVerticallyAttachedExample
+export default ButtonExampleVerticallyAttachedGroup
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonPositiveNegativeExample.js b/docs/app/Examples/elements/Button/Variations/ButtonPositiveNegativeExample.js
deleted file mode 100644
index 576a3add92..0000000000
--- a/docs/app/Examples/elements/Button/Variations/ButtonPositiveNegativeExample.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Button } from 'semantic-ui-react'
-
-const ButtonPositiveNegativeExample = () => (
-  <div>
-    <Button positive>Positive</Button>
-    <Button negative>Negative</Button>
-  </div>
-)
-
-export default ButtonPositiveNegativeExample
diff --git a/docs/app/Examples/elements/Button/Variations/index.js b/docs/app/Examples/elements/Button/Variations/index.js
index 0fb500ddc6..b5dc57c975 100644
--- a/docs/app/Examples/elements/Button/Variations/index.js
+++ b/docs/app/Examples/elements/Button/Variations/index.js
@@ -6,69 +6,69 @@ const ButtonVariationsExamples = () => (
   <ExampleSection title='Variations'>
     <ComponentExample
       title='Social'
-      description='A button can be formatted to link to a social website'
-      examplePath='elements/Button/Variations/ButtonSocialExample'
+      description='A button can be formatted to link to a social website.'
+      examplePath='elements/Button/Variations/ButtonExampleSocial'
     />
     <ComponentExample
       title='Size'
-      description='Buttons can have assorted sizes'
-      examplePath='elements/Button/Variations/ButtonSizeExample'
+      description='Buttons can have assorted sizes.'
+      examplePath='elements/Button/Variations/ButtonExampleSize'
     />
     <ComponentExample
       title='Floated'
-      description='A button can be aligned to the left or right of its container'
-      examplePath='elements/Button/Variations/ButtonFloatedExample'
+      description='A button can be aligned to the left or right of its container.'
+      examplePath='elements/Button/Variations/ButtonExampleFloated'
     />
     <ComponentExample
       title='Colored'
-      description='A button can have different containers'
-      examplePath='elements/Button/Variations/ButtonColoredExample'
+      description='A button can have different containers.'
+      examplePath='elements/Button/Variations/ButtonExampleColored'
     />
     <ComponentExample
       title='Compact'
-      description='Buttons can have reduced padding'
-      examplePath='elements/Button/Variations/ButtonCompactExample'
+      description='Buttons can have reduced padding.'
+      examplePath='elements/Button/Variations/ButtonExampleCompact'
     />
     <ComponentExample
       title='Toggle'
-      description='A button can be formatted to toggle when active'
-      examplePath='elements/Button/Variations/ButtonToggleExample'
+      description='A button can be formatted to toggle when active.'
+      examplePath='elements/Button/Variations/ButtonExampleToggle'
     />
     <ComponentExample
       title='Positive'
-      description='A button can hint towards a positive consequence'
-      examplePath='elements/Button/Variations/ButtonPositiveExample'
+      description='A button can hint towards a positive consequence.'
+      examplePath='elements/Button/Variations/ButtonExamplePositive'
     />
     <ComponentExample
       title='Negative'
-      description='A button can hint towards a negative consequence'
-      examplePath='elements/Button/Variations/ButtonNegativeExample'
+      description='A button can hint towards a negative consequence.'
+      examplePath='elements/Button/Variations/ButtonExampleNegative'
     />
     <ComponentExample
       title='Fluid'
-      description='A button can take the width of its container'
-      examplePath='elements/Button/Variations/ButtonFluidExample'
+      description='A button can take the width of its container.'
+      examplePath='elements/Button/Variations/ButtonExampleFluid'
     />
     <ComponentExample
       title='Circular'
-      description='A button can be circular'
-      examplePath='elements/Button/Variations/ButtonCircularExample'
+      description='A button can be circular.'
+      examplePath='elements/Button/Variations/ButtonExampleCircular'
     />
     <ComponentExample
-      examplePath='elements/Button/Variations/ButtonCircularSocialExample'
+      examplePath='elements/Button/Variations/ButtonExampleCircularSocial'
     />
     <ComponentExample
       title='Vertically Attached'
-      description='A button can be attached to the top or bottom of other content'
-      examplePath='elements/Button/Variations/ButtonVerticallyAttachedExample'
+      description='A button can be attached to the top or bottom of other content.'
+      examplePath='elements/Button/Variations/ButtonExampleVerticallyAttached'
     />
     <ComponentExample
-      examplePath='elements/Button/Variations/ButtonVerticallyAttachedGroupExample'
+      examplePath='elements/Button/Variations/ButtonExampleVerticallyAttachedGroup'
     />
     <ComponentExample
       title='Horizontally Attached'
-      description='A button can be attached to the left or right of other content'
-      examplePath='elements/Button/Variations/ButtonHorizontallyAttachedExample'
+      description='A button can be attached to the left or right of other content.'
+      examplePath='elements/Button/Variations/ButtonExampleHorizontallyAttached'
     />
   </ExampleSection>
 )