diff --git a/.gitignore b/.gitignore
index aa033fc172..5e1f60210d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,9 +3,9 @@ node_modules/
 bower_components/
 coverage/
 dist/
-docs/build
+docs/build/
 docs/app/docgenInfo.json
-dll
+dll/
 
 .DS_Store
 .idea/
diff --git a/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js b/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js
index e60212ecd2..0a0e9980a0 100644
--- a/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js
+++ b/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js
@@ -49,8 +49,8 @@ const FormSpecifyingValidationRulesExample = (props) => (
     <Form.Field className='inline'>
       <Checkbox name='terms' className='hidden' label='I agree to the terms and conditions' />
     </Form.Field>
-    <Button className='blue submit'>Submit</Button>
-    <Message error />
+    <Button color='blue' type='submit'>Submit</Button>
+    <Message className='error' />
   </Form>
 )
 
diff --git a/docs/app/Examples/collections/Form/Validation/index.js b/docs/app/Examples/collections/Form/Validation/index.js
index d8110057bf..dbd9e658fa 100644
--- a/docs/app/Examples/collections/Form/Validation/index.js
+++ b/docs/app/Examples/collections/Form/Validation/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable react/jsx-curly-spacing */
+
 import React, { Component } from 'react'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
diff --git a/docs/app/Examples/elements/Button/Content/ButtonConditionalsExample.js b/docs/app/Examples/elements/Button/Content/ButtonConditionalsExample.js
index 4c1ddaa5bd..04e982228f 100644
--- a/docs/app/Examples/elements/Button/Content/ButtonConditionalsExample.js
+++ b/docs/app/Examples/elements/Button/Content/ButtonConditionalsExample.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react'
-import { Buttons, Button } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonConditionalsExample extends Component {
   render() {
     return (
-      <Buttons>
+      <Button.Group>
         <Button>Cancel</Button>
         <div className='or' />
         <Button className='positive'>Save</Button>
-      </Buttons>
+      </Button.Group>
     )
   }
 }
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonButtonsExample.js b/docs/app/Examples/elements/Button/Groups/ButtonButtonsExample.js
index b4af6c5263..8dbd1455c0 100644
--- a/docs/app/Examples/elements/Button/Groups/ButtonButtonsExample.js
+++ b/docs/app/Examples/elements/Button/Groups/ButtonButtonsExample.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react'
-import { Buttons, Button } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonButtonsExample extends Component {
   render() {
     return (
-      <Buttons>
+      <Button.Group>
         <Button>One</Button>
         <Button>Two</Button>
         <Button>Three</Button>
-      </Buttons>
+      </Button.Group>
     )
   }
 }
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonColoredButtonsExample.js b/docs/app/Examples/elements/Button/Groups/ButtonColoredButtonsExample.js
new file mode 100644
index 0000000000..b440d9d44b
--- /dev/null
+++ b/docs/app/Examples/elements/Button/Groups/ButtonColoredButtonsExample.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonColoredButtonsExample extends Component {
+  render() {
+    return (
+      <Button.Group color='blue'>
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </Button.Group>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonEqualWidthsButtonsExample.js b/docs/app/Examples/elements/Button/Groups/ButtonEqualWidthsButtonsExample.js
new file mode 100644
index 0000000000..d5668e02ff
--- /dev/null
+++ b/docs/app/Examples/elements/Button/Groups/ButtonEqualWidthsButtonsExample.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonEqualWidthsButtonsExample extends Component {
+  render() {
+    return (
+      <div>
+        <Button.Group widths='five'>
+          <Button>Overview</Button>
+          <Button>Specs</Button>
+          <Button>Warrantee</Button>
+          <Button>Reviews</Button>
+          <Button>Support</Button>
+        </Button.Group>
+        <Button.Group widths='three'>
+          <Button>Overview</Button>
+          <Button>Specs</Button>
+          <Button>Support</Button>
+        </Button.Group>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonGroupsExamples.js b/docs/app/Examples/elements/Button/Groups/ButtonGroupsExamples.js
index cbfa0097cc..683ed25726 100644
--- a/docs/app/Examples/elements/Button/Groups/ButtonGroupsExamples.js
+++ b/docs/app/Examples/elements/Button/Groups/ButtonGroupsExamples.js
@@ -11,11 +11,31 @@ export default class ButtonGroupsExamples extends Component {
           description='Buttons can exist together as a group'
           examplePath='elements/Button/Groups/ButtonButtonsExample'
         />
+        <ComponentExample
+          title='Vertical Buttons'
+          description='Groups can be formatted to appear vertically'
+          examplePath='elements/Button/Groups/ButtonVerticalButtonsExample'
+        />
         <ComponentExample
           title='Icon Buttons'
           description='Button groups can show groups of icons'
           examplePath='elements/Button/Groups/ButtonIconButtonsExample'
         />
+        <ComponentExample
+          title='Labeled Icon Buttons'
+          description='Groups can be formatted as labeled icons'
+          examplePath='elements/Button/Groups/ButtonLabeledIconButtonsExample'
+        />
+        <ComponentExample
+          title='Equal Widths'
+          description='Groups can have their widths divided evenly'
+          examplePath='elements/Button/Groups/ButtonEqualWidthsButtonsExample'
+        />
+        <ComponentExample
+          title='Colored Buttons'
+          description='Groups can have a shared color'
+          examplePath='elements/Button/Groups/ButtonColoredButtonsExample'
+        />
       </ExampleSection>
     )
   }
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonIconButtonsExample.js b/docs/app/Examples/elements/Button/Groups/ButtonIconButtonsExample.js
index 5174ae7ef1..461550b400 100644
--- a/docs/app/Examples/elements/Button/Groups/ButtonIconButtonsExample.js
+++ b/docs/app/Examples/elements/Button/Groups/ButtonIconButtonsExample.js
@@ -1,20 +1,14 @@
 import React, { Component } from 'react'
-import { Buttons, Button, Icon } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonIconButtonsExample extends Component {
   render() {
     return (
-      <Buttons>
-        <Button className='icon'>
-          <Icon name='save' />
-        </Button>
-        <Button className='icon'>
-          <Icon name='delete' />
-        </Button>
-        <Button className='icon'>
-          <Icon name='edit' />
-        </Button>
-      </Buttons>
+      <Button.Group icon>
+        <Button icon='save' />
+        <Button icon='delete' />
+        <Button icon='edit' />
+      </Button.Group>
     )
   }
 }
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonLabeledIconButtonsExample.js b/docs/app/Examples/elements/Button/Groups/ButtonLabeledIconButtonsExample.js
new file mode 100644
index 0000000000..04abaf71b8
--- /dev/null
+++ b/docs/app/Examples/elements/Button/Groups/ButtonLabeledIconButtonsExample.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonLabeledIconButtonsExample extends Component {
+  render() {
+    return (
+      <Button.Group vertical labeled='icon'>
+        <Button icon='save'>Pause</Button>
+        <Button icon='play'>Play</Button>
+        <Button icon='shuffle'>Shuffle</Button>
+      </Button.Group>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonMixedGroupButtonsExample.js b/docs/app/Examples/elements/Button/Groups/ButtonMixedGroupButtonsExample.js
new file mode 100644
index 0000000000..497c341bc3
--- /dev/null
+++ b/docs/app/Examples/elements/Button/Groups/ButtonMixedGroupButtonsExample.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonMixedGroupButtonsExample extends Component {
+  render() {
+    return (
+      <Button.Group>
+        <Button labeled='icon'>Feed</Button>
+        <Button>Messages</Button>
+        <Button>Events</Button>
+        <Button>Photos</Button>
+      </Button.Group>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Button/Groups/ButtonVerticalButtonsExample.js b/docs/app/Examples/elements/Button/Groups/ButtonVerticalButtonsExample.js
new file mode 100644
index 0000000000..01c3f062bf
--- /dev/null
+++ b/docs/app/Examples/elements/Button/Groups/ButtonVerticalButtonsExample.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonVerticalButtonsExample extends Component {
+  render() {
+    return (
+      <Button.Group vertical>
+        <Button>Feed</Button>
+        <Button>Messages</Button>
+        <Button>Events</Button>
+        <Button>Photos</Button>
+      </Button.Group>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Button/States/ButtonActiveExample.js b/docs/app/Examples/elements/Button/States/ButtonActiveExample.js
index 2d34a4d857..6197625a87 100644
--- a/docs/app/Examples/elements/Button/States/ButtonActiveExample.js
+++ b/docs/app/Examples/elements/Button/States/ButtonActiveExample.js
@@ -4,7 +4,7 @@ import { Button } from 'stardust'
 export default class ButtonActiveExample extends Component {
   render() {
     return (
-      <Button className='active' />
+      <Button active />
     )
   }
 }
diff --git a/docs/app/Examples/elements/Button/States/ButtonDisabledExample.js b/docs/app/Examples/elements/Button/States/ButtonDisabledExample.js
index c3c0e4f254..034d6d5387 100644
--- a/docs/app/Examples/elements/Button/States/ButtonDisabledExample.js
+++ b/docs/app/Examples/elements/Button/States/ButtonDisabledExample.js
@@ -4,7 +4,7 @@ import { Button } from 'stardust'
 export default class ButtonDisabledExample extends Component {
   render() {
     return (
-      <Button className='disabled'>Disabled</Button>
+      <Button disabled >Disabled</Button>
     )
   }
 }
diff --git a/docs/app/Examples/elements/Button/States/ButtonLoadingExample.js b/docs/app/Examples/elements/Button/States/ButtonLoadingExample.js
index 7c27199584..1929672fb4 100644
--- a/docs/app/Examples/elements/Button/States/ButtonLoadingExample.js
+++ b/docs/app/Examples/elements/Button/States/ButtonLoadingExample.js
@@ -5,10 +5,10 @@ export default class ButtonLoadingExample extends Component {
   render() {
     return (
       <div>
-        <Button className='loading' />
-        <Button className='basic loading' />
-        <Button className='primary loading' />
-        <Button className='secondary loading' />
+        <Button loading />
+        <Button basic loading />
+        <Button loading className='primary' />
+        <Button loading className='secondary' />
       </div>
     )
   }
diff --git a/docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js b/docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js
index 694e284cc2..8157654e39 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js
@@ -4,7 +4,7 @@ import { Button, Icon } from 'stardust'
 export default class ButtonAnimatedExample extends Component {
   render() {
     return (
-      <Button className='animated'>
+      <Button animated>
         <div className='visible content'>Next</div>
         <div className='hidden content'>
           <Icon name='right arrow' />
diff --git a/docs/app/Examples/elements/Button/Types/ButtonBasicExample.js b/docs/app/Examples/elements/Button/Types/ButtonBasicExample.js
index b52bae5bef..1037b0ff2a 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonBasicExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonBasicExample.js
@@ -5,20 +5,20 @@ export default class ButtonBasicExample extends Component {
   render() {
     return (
       <div>
-        <Button className='basic'>Standard</Button>
-        <Button className='red basic'>Red</Button>
-        <Button className='orange basic'>Orange</Button>
-        <Button className='yellow basic'>Yellow</Button>
-        <Button className='olive basic'>Olive</Button>
-        <Button className='green basic'>Green</Button>
-        <Button className='teal basic'>Teal</Button>
-        <Button className='blue basic'>Blue</Button>
-        <Button className='violet basic'>Violet</Button>
-        <Button className='purple basic'>Purple</Button>
-        <Button className='pink basic'>Pink</Button>
-        <Button className='brown basic'>Brown</Button>
-        <Button className='grey basic'>Grey</Button>
-        <Button className='black basic'>Black</Button>
+        <Button basic >Standard</Button>
+        <Button basic color='red'>Red</Button>
+        <Button basic color='orange'>Orange</Button>
+        <Button basic color='yellow'>Yellow</Button>
+        <Button basic color='olive'>Olive</Button>
+        <Button basic color='green'>Green</Button>
+        <Button basic color='teal'>Teal</Button>
+        <Button basic color='blue'>Blue</Button>
+        <Button basic color='violet'>Violet</Button>
+        <Button basic color='purple'>Purple</Button>
+        <Button basic color='pink'>Pink</Button>
+        <Button basic color='brown'>Brown</Button>
+        <Button basic color='grey'>Grey</Button>
+        <Button basic color='black'>Black</Button>
       </div>
     )
   }
diff --git a/docs/app/Examples/elements/Button/Types/ButtonEmphasisExample.js b/docs/app/Examples/elements/Button/Types/ButtonEmphasisExample.js
index 54f813539c..34749ce80a 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonEmphasisExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonEmphasisExample.js
@@ -5,8 +5,8 @@ export default class ButtonEmphasisExample extends Component {
   render() {
     return (
       <div>
-        <Button className='primary'>Primary</Button>
-        <Button className='secondary'>Secondary</Button>
+        <Button primary>Primary</Button>
+        <Button secondary>Secondary</Button>
       </div>
     )
   }
diff --git a/docs/app/Examples/elements/Button/Types/ButtonIconExample.js b/docs/app/Examples/elements/Button/Types/ButtonIconExample.js
index 355b29389d..b67aedc5ae 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonIconExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonIconExample.js
@@ -1,12 +1,10 @@
 import React, { Component } from 'react'
-import { Button, Icon } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonIconExample extends Component {
   render() {
     return (
-      <Button className='icon'>
-        <Icon name='world' />
-      </Button>
+      <Button icon='world' />
     )
   }
 }
diff --git a/docs/app/Examples/elements/Button/Types/ButtonInvertedExample.js b/docs/app/Examples/elements/Button/Types/ButtonInvertedExample.js
index 5a477bbc2e..4f794fc992 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonInvertedExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonInvertedExample.js
@@ -5,37 +5,37 @@ export default class ButtonInvertedExample extends Component {
   render() {
     return (
       <div>
-        <Segment className='inverted'>
-          <Button className='inverted'>Standard</Button>
-          <Button className='inverted red'>Red</Button>
-          <Button className='inverted orange'>Orange</Button>
-          <Button className='inverted yellow'>Yellow</Button>
-          <Button className='inverted olive'>Olive</Button>
-          <Button className='inverted green'>Green</Button>
-          <Button className='inverted teal'>Teal</Button>
-          <Button className='inverted blue'>Blue</Button>
-          <Button className='inverted violet'>Violet</Button>
-          <Button className='inverted purple'>Purple</Button>
-          <Button className='inverted pink'>Pink</Button>
-          <Button className='inverted brown'>Brown</Button>
-          <Button className='inverted grey'>Grey</Button>
-          <Button className='inverted black'>Black</Button>
+        <Segment inverted>
+          <Button inverted>Standard</Button>
+          <Button inverted color='red'>Red</Button>
+          <Button inverted color='orange'>Orange</Button>
+          <Button inverted color='yellow'>Yellow</Button>
+          <Button inverted color='olive'>Olive</Button>
+          <Button inverted color='green'>Green</Button>
+          <Button inverted color='teal'>Teal</Button>
+          <Button inverted color='blue'>Blue</Button>
+          <Button inverted color='violet'>Violet</Button>
+          <Button inverted color='purple'>Purple</Button>
+          <Button inverted color='pink'>Pink</Button>
+          <Button inverted color='brown'>Brown</Button>
+          <Button inverted color='grey'>Grey</Button>
+          <Button inverted color='black'>Black</Button>
         </Segment>
-        <Segment className='inverted'>
-          <Button className='inverted basic'>Standard</Button>
-          <Button className='inverted red basic'>Red</Button>
-          <Button className='inverted orange basic'>Orange</Button>
-          <Button className='inverted yellow basic'>Yellow</Button>
-          <Button className='inverted olive basic'>Olive</Button>
-          <Button className='inverted green basic'>Green</Button>
-          <Button className='inverted teal basic'>Teal</Button>
-          <Button className='inverted blue basic'>Blue</Button>
-          <Button className='inverted violet basic'>Violet</Button>
-          <Button className='inverted purple basic'>Purple</Button>
-          <Button className='inverted pink basic'>Pink</Button>
-          <Button className='inverted brown basic'>Brown</Button>
-          <Button className='inverted grey basic'>Grey</Button>
-          <Button className='inverted black basic'>Black</Button>
+        <Segment inverted>
+          <Button basic inverted >Standard</Button>
+          <Button basic inverted color='red'>Red</Button>
+          <Button basic inverted color='orange'>Orange</Button>
+          <Button basic inverted color='yellow'>Yellow</Button>
+          <Button basic inverted color='olive'>Olive</Button>
+          <Button basic inverted color='green'>Green</Button>
+          <Button basic inverted color='teal'>Teal</Button>
+          <Button basic inverted color='blue'>Blue</Button>
+          <Button basic inverted color='violet'>Violet</Button>
+          <Button basic inverted color='purple'>Purple</Button>
+          <Button basic inverted color='pink'>Pink</Button>
+          <Button basic inverted color='brown'>Brown</Button>
+          <Button basic inverted color='grey'>Grey</Button>
+          <Button basic inverted color='black'>Black</Button>
         </Segment>
       </div>
     )
diff --git a/docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js b/docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js
index 30517e8534..c1be8f2e4e 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js
@@ -1,13 +1,10 @@
 import React, { Component } from 'react'
-import { Button, Icon, Label } from 'stardust'
+import { Button, Label } from 'stardust'
 
 export default class ButtonLabeledExample extends Component {
   render() {
     return (
-      <Button className='labeled'>
-        <Button>
-          <Icon name='heart' /> Like
-        </Button>
+      <Button labeled icon='heart'>
         {/* TODO: See issue #46 - button needs to render as a div */}
         <Label basic link>
           3,000
diff --git a/docs/app/Examples/elements/Button/Types/ButtonLabeledIconExample.js b/docs/app/Examples/elements/Button/Types/ButtonLabeledIconExample.js
index 360138c912..88b8915e8c 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonLabeledIconExample.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonLabeledIconExample.js
@@ -1,16 +1,14 @@
 import React, { Component } from 'react'
-import { Button, Icon } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonLabeledIconExample extends Component {
   render() {
     return (
       <div>
-        <Button className='labeled icon'>
-          <Icon name='pause' />
+        <Button labeled='icon' icon='pause'>
           Pause
         </Button>
-        <Button className='right labeled icon'>
-          <Icon name='right arrow' />
+        <Button labeled='right icon' icon='right arrow'>
           Next
         </Button>
       </div>
diff --git a/docs/app/Examples/elements/Button/Types/ButtonTypesExamples.js b/docs/app/Examples/elements/Button/Types/ButtonTypesExamples.js
index 50cca3774d..8fd455bf0d 100644
--- a/docs/app/Examples/elements/Button/Types/ButtonTypesExamples.js
+++ b/docs/app/Examples/elements/Button/Types/ButtonTypesExamples.js
@@ -13,7 +13,7 @@ export default class ButtonTypesExamples extends Component {
         />
         <ComponentExample
           title='Emphasis'
-          description='Button formatting can reflect different types of emphasis'
+          description='A button can be formatted to show different levels of emphasis'
           examplePath='elements/Button/Types/ButtonEmphasisExample'
         />
         <ComponentExample
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonCircularExample.js b/docs/app/Examples/elements/Button/Variations/ButtonCircularExample.js
index 56d990f58f..2b0f60dc81 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonCircularExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonCircularExample.js
@@ -1,12 +1,18 @@
 import React, { Component } from 'react'
-import { Button, Icon } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonCircularExample extends Component {
   render() {
     return (
-      <Button className='circular icon'>
-        <Icon name='heart' />
-      </Button>
+      <div>
+        <Button circular icon='settings' />
+        <div>
+          <Button circular icon='facebook' />
+          <Button circular icon='twitter' />
+          <Button circular icon='linkedin' />
+          <Button circular icon='google' />
+        </div>
+      </div>
     )
   }
 }
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonColoredExample.js b/docs/app/Examples/elements/Button/Variations/ButtonColoredExample.js
index a4313354e8..8c89014174 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonColoredExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonColoredExample.js
@@ -5,19 +5,19 @@ export default class ButtonColoredExample extends Component {
   render() {
     return (
       <div>
-        <Button className='red'>Red</Button>
-        <Button className='orange'>Orange</Button>
-        <Button className='yellow'>Yellow</Button>
-        <Button className='olive'>Olive</Button>
-        <Button className='green'>Green</Button>
-        <Button className='teal'>Teal</Button>
-        <Button className='blue'>Blue</Button>
-        <Button className='violet'>Violet</Button>
-        <Button className='purple'>Purple</Button>
-        <Button className='pink'>Pink</Button>
-        <Button className='brown'>Brown</Button>
-        <Button className='grey'>Grey</Button>
-        <Button className='black'>Black</Button>
+        <Button color='red'>Red</Button>
+        <Button color='orange'>Orange</Button>
+        <Button color='yellow'>Yellow</Button>
+        <Button color='olive'>Olive</Button>
+        <Button color='green'>Green</Button>
+        <Button color='teal'>Teal</Button>
+        <Button color='blue'>Blue</Button>
+        <Button color='violet'>Violet</Button>
+        <Button color='purple'>Purple</Button>
+        <Button color='pink'>Pink</Button>
+        <Button color='brown'>Brown</Button>
+        <Button color='grey'>Grey</Button>
+        <Button color='black'>Black</Button>
       </div>
     )
   }
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonCompactExample.js b/docs/app/Examples/elements/Button/Variations/ButtonCompactExample.js
index f305f0bded..92577dc0b8 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonCompactExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonCompactExample.js
@@ -5,7 +5,7 @@ export default class ButtonCompactExample extends Component {
   render() {
     return (
       <div>
-        <Button className='compact'>Compact</Button>
+        <Button compact>Compact</Button>
         <Button>Normal</Button>
       </div>
     )
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonFloatedExample.js b/docs/app/Examples/elements/Button/Variations/ButtonFloatedExample.js
index 6ba49d2c1f..f6a3fe7247 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonFloatedExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonFloatedExample.js
@@ -5,8 +5,8 @@ export default class ButtonFloatedExample extends Component {
   render() {
     return (
       <div>
-        <Button className='right floated'>Right Floated</Button>
-        <Button className='left floated'>Left Floated</Button>
+        <Button floated='right'>Right Floated</Button>
+        <Button floated='left'>Left Floated</Button>
       </div>
     )
   }
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonFluidExample.js b/docs/app/Examples/elements/Button/Variations/ButtonFluidExample.js
index 38564396ac..f42571c367 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonFluidExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonFluidExample.js
@@ -4,7 +4,7 @@ import { Button } from 'stardust'
 export default class ButtonFluidExample extends Component {
   render() {
     return (
-      <Button className='fluid'>Fits to Container</Button>
+      <Button fluid>Fits to Container</Button>
     )
   }
 }
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonHorizontallyAttachedExample.js b/docs/app/Examples/elements/Button/Variations/ButtonHorizontallyAttachedExample.js
index 8051d9f1bf..788de908c9 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonHorizontallyAttachedExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonHorizontallyAttachedExample.js
@@ -5,8 +5,8 @@ export default class ButtonHorizontallyAttachedExample extends Component {
   render() {
     return (
       <div>
-        <Button className='left attached'>Left</Button>
-        <Button className='right attached'>Right</Button>
+        <Button attached='left'>Left</Button>
+        <Button attached='right'>Right</Button>
       </div>
     )
   }
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonNegativeExample.js b/docs/app/Examples/elements/Button/Variations/ButtonNegativeExample.js
new file mode 100644
index 0000000000..e7f975601b
--- /dev/null
+++ b/docs/app/Examples/elements/Button/Variations/ButtonNegativeExample.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonNegativeExample extends Component {
+  render() {
+    return (
+      <div>
+        <Button negative>Negative Button</Button>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonPositiveExample.js b/docs/app/Examples/elements/Button/Variations/ButtonPositiveExample.js
new file mode 100644
index 0000000000..7f682f475a
--- /dev/null
+++ b/docs/app/Examples/elements/Button/Variations/ButtonPositiveExample.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonPositiveExample extends Component {
+  render() {
+    return (
+      <div>
+        <Button positive>Positive Button</Button>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonSizeExample.js b/docs/app/Examples/elements/Button/Variations/ButtonSizeExample.js
index 109a04b913..48eacffa9e 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonSizeExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonSizeExample.js
@@ -5,28 +5,28 @@ export default class ButtonSizeExample extends Component {
   render() {
     return (
       <div>
-        <Button className='mini'>
+        <Button size='mini'>
           Mini
         </Button>
-        <Button className='tiny'>
+        <Button size='tiny'>
           Tiny
         </Button>
-        <Button className='small'>
+        <Button size='small'>
           Small
         </Button>
-        <Button className='medium'>
+        <Button size='medium'>
           Medium
         </Button>
-        <Button className='large'>
+        <Button size='large'>
           Large
         </Button>
-        <Button className='big'>
+        <Button size='big'>
           Big
         </Button>
-        <Button className='huge'>
+        <Button size='huge'>
           Huge
         </Button>
-        <Button className='massive'>
+        <Button size='massive'>
           Massive
         </Button>
       </div>
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonSocialExample.js b/docs/app/Examples/elements/Button/Variations/ButtonSocialExample.js
index 398df98b53..ef13b1da84 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonSocialExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonSocialExample.js
@@ -1,36 +1,29 @@
 import React, { Component } from 'react'
-import { Button, Icon } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonSocialExample extends Component {
   render() {
     return (
       <div>
-        <Button className='facebook'>
-          <Icon name='facebook' />
+        <Button className='facebook' icon='facebook'>
           Facebook
         </Button>
-        <Button className='twitter'>
-          <Icon name='twitter' />
+        <Button className='twitter' icon='twitter'>
           Twitter
         </Button>
-        <Button className='google plus'>
-          <Icon name='google plus' />
+        <Button className='google plus' icon='google plus'>
           Google Plus
         </Button>
-        <Button className='vk'>
-          <Icon name='vk' />
+        <Button className='vk' icon='vk'>
           VK
         </Button>
-        <Button className='linkedin'>
-          <Icon name='linkedin' />
+        <Button className='linkedin' icon='linkedin'>
           LinkedIn
         </Button>
-        <Button className='instagram'>
-          <Icon name='instagram' />
+        <Button className='instagram' icon='instagram'>
           Instagram
         </Button>
-        <Button className='youtube'>
-          <Icon name='youtube' />
+        <Button className='youtube' icon='youtube'>
           YouTube
         </Button>
       </div>
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonToggleExample.js b/docs/app/Examples/elements/Button/Variations/ButtonToggleExample.js
index 32bdf411b8..22189de31a 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonToggleExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonToggleExample.js
@@ -4,7 +4,7 @@ import { Button } from 'stardust'
 export default class ButtonToggleExample extends Component {
   render() {
     return (
-      <Button className='toggle'>Toggle</Button>
+      <Button toggle>Toggle</Button>
       // TODO: Need to add functionality for toggle button - See issue #43
     )
   }
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedExample.js b/docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedExample.js
index 9696a1675b..4135cb780f 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedExample.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonVerticallyAttachedExample.js
@@ -5,11 +5,11 @@ export default class ButtonVerticallyAttachedExample extends Component {
   render() {
     return (
       <div>
-        <Button className='top attached'>Top</Button>
-        <Segment className='attached'>
+        <Button attached='top'>Top</Button>
+        <Segment attached>
           <p>Content goes here</p>
         </Segment>
-        <Button className='bottom attached'>Bottom</Button>
+        <Button attached='bottom'>Bottom</Button>
       </div>
       // TODO: Extend button component to work with an attached div - see issue #46
     )
diff --git a/docs/app/Examples/elements/Button/Variations/ButtonsVariationsExamples.js b/docs/app/Examples/elements/Button/Variations/ButtonsVariationsExamples.js
index 9ccca076d0..eac94df304 100644
--- a/docs/app/Examples/elements/Button/Variations/ButtonsVariationsExamples.js
+++ b/docs/app/Examples/elements/Button/Variations/ButtonsVariationsExamples.js
@@ -37,9 +37,14 @@ export default class ButtonVariationsExamples extends Component {
           examplePath='elements/Button/Variations/ButtonToggleExample'
         />
         <ComponentExample
-          title='Positive/Negative'
-          description='A button can visually indicate consequence'
-          examplePath='elements/Button/Variations/ButtonPositiveNegativeExample'
+          title='Positive'
+          description='A button can hint towards a positive consequence'
+          examplePath='elements/Button/Variations/ButtonPositiveExample'
+        />
+        <ComponentExample
+          title='Negative'
+          description='A button can hint towards a negative consequence'
+          examplePath='elements/Button/Variations/ButtonNegativeExample'
         />
         <ComponentExample
           title='Fluid'
diff --git a/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js b/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js
index d1b0d0f876..58fdc1cda9 100644
--- a/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js
+++ b/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js
@@ -5,9 +5,9 @@ export default class DividerHorizontalExample extends Component {
   render() {
     return (
       <Segment className='padded'>
-        <Button className='primary fluid'>Login</Button>
+        <Button primary fluid>Login</Button>
         <Divider horizontal>Or</Divider>
-        <Button className='secondary fluid'>Sign Up Now</Button>
+        <Button secondary fluid>Sign Up Now</Button>
       </Segment>
     )
   }
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js b/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js
index c40d3770bf..9123d1caea 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js
+++ b/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js
@@ -5,7 +5,7 @@ export default class DividerClearingExample extends Component {
   render() {
     return (
       <Segment>
-        <Button className='right floated'>Floated Button</Button>
+        <Button floated='right'>Floated Button</Button>
         <Divider clearing />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
       </Segment>
diff --git a/docs/app/Examples/elements/Input/Variations/InputActionExtraExample.js b/docs/app/Examples/elements/Input/Variations/InputActionExtraExample.js
index d77475d48b..32e9adf027 100644
--- a/docs/app/Examples/elements/Input/Variations/InputActionExtraExample.js
+++ b/docs/app/Examples/elements/Input/Variations/InputActionExtraExample.js
@@ -1,12 +1,11 @@
 import React, { Component } from 'react'
-import { Button, Icon, Input } from 'stardust'
+import { Button, Input } from 'stardust'
 
 export default class InputActionExtraExample extends Component {
   render() {
     return (
       <Input className='left action' placeholder='$23.43'>
-        <Button className='teal labeled icon'>
-          <Icon name='cart' />
+        <Button labeled color='teal' icon='cart'>
           Checkout
         </Button>
       </Input>
diff --git a/docs/app/Examples/elements/Segment/Variations/SegmentClearingExample.js b/docs/app/Examples/elements/Segment/Variations/SegmentClearingExample.js
index 3c90dcdf57..7b5eb40906 100644
--- a/docs/app/Examples/elements/Segment/Variations/SegmentClearingExample.js
+++ b/docs/app/Examples/elements/Segment/Variations/SegmentClearingExample.js
@@ -5,7 +5,7 @@ export default class SegmentClearingExample extends Component {
   render() {
     return (
       <Segment className='clearing'>
-        <Button className='right floated'>
+        <Button floated='right'>
           floated
         </Button>
       </Segment>
diff --git a/src/deprecatedComponents.js b/src/deprecatedComponents.js
index 6332780ebe..6c64c7b560 100644
--- a/src/deprecatedComponents.js
+++ b/src/deprecatedComponents.js
@@ -25,8 +25,8 @@ export const TableColumn = deprecateComponent('TableColumn', 'Use "Table.Column"
 //
 // Elements
 //
-// TODO deprecate Buttons once updated to v1 API
-export Buttons from './elements/Button/Buttons'
+import Button from './elements/Button/Button'
+export const Buttons = deprecateComponent('Buttons', 'Use "Button.Group" instead.', Button.Group)
 import List from './elements/List/List'
 export const ListItem = deprecateComponent('ListItem', 'Use "List.Item" instead.', List.Item)
 
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index e445e4701f..2aa9b2acdd 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -1,42 +1,167 @@
-import React, { Component, PropTypes } from 'react'
-import classNames from 'classnames'
-import { getElementType, getUnhandledProps, META } from '../../lib'
-
-export default class Button extends Component {
-  static propTypes = {
-    /** An element type to render as (string or function). */
-    as: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.func,
-    ]),
-
-    children: PropTypes.node,
-    className: PropTypes.string,
-    type: PropTypes.string,
-  }
-
-  static defaultProps = {
-    type: 'button',
-    as: 'button',
-  }
-
-  static _meta = {
-    name: 'Button',
-    type: META.TYPES.ELEMENT,
-  }
-
-  render() {
-    const classes = classNames(
-      'ui',
-      this.props.className,
-      'button'
-    )
-    const rest = getUnhandledProps(Button, this.props)
-    const ElementType = getElementType(Button, this.props)
-    return (
-      <ElementType {...rest} type={this.props.type} className={classes}>
-        {this.props.children}
-      </ElementType>
-    )
-  }
+import cx from 'classnames'
+import React, { PropTypes } from 'react'
+
+import {
+  getElementType,
+  getUnhandledProps,
+  iconPropRenderer,
+  META,
+  SUI,
+  useKeyOnly,
+  useKeyOrValueAndKey,
+  useValueAndKey,
+} from '../../lib'
+import ButtonGroup from './ButtonGroup'
+
+/**
+ * Button
+ */
+function Button(props) {
+  const {
+    active, animated, attached, basic, children, circular, className, color, compact, disabled,
+    floated, fluid, icon, inverted, labeled, loading, negative, positive, primary, secondary, size, toggle, type,
+  } = props
+
+  const classes = cx('ui',
+    icon && 'icon',
+    color,
+    size,
+    useKeyOnly(active, 'active'),
+    useKeyOnly(animated, 'animated'),
+    useKeyOrValueAndKey(attached, 'attached'),
+    useKeyOnly(basic, 'basic'),
+    useKeyOnly(circular, 'circular'),
+    useKeyOnly(compact, 'compact'),
+    useKeyOnly(disabled, 'disabled'),
+    useValueAndKey(floated, 'floated'),
+    useKeyOnly(fluid, 'fluid'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOrValueAndKey(labeled, 'labeled'),
+    useKeyOnly(loading, 'loading'),
+    useKeyOnly(negative, 'negative'),
+    useKeyOnly(positive, 'positive'),
+    useKeyOnly(primary, 'primary'),
+    useKeyOnly(secondary, 'secondary'),
+    useKeyOnly(toggle, 'toggle'),
+    'button',
+    className
+  )
+
+  const rest = getUnhandledProps(Button, props)
+  // TODO: this utility only maps props to element types
+  // it does not handle mapping prop values to element types
+  // we'll need to extend it to do so
+  const ElementType = getElementType(Button, props, {
+    // type === 'submit' then 'button'
+    attached: 'div',
+  })
+  const tabIndex = ElementType === 'div' && { tabIndex: 0 }
+
+  return (
+    <ElementType {...rest} type={type} className={classes} {...tabIndex}>
+      {iconPropRenderer(icon)}
+      {children}
+    </ElementType>
+  )
+}
+
+Button.Group = ButtonGroup
+
+Button._meta = {
+  name: 'Button',
+  type: META.TYPES.ELEMENT,
+  props: {
+    attached: ['left', 'right', 'top', 'bottom'],
+    color: SUI.COLORS,
+    floated: SUI.FLOATS,
+    labeled: ['left icon', 'right icon'],
+    size: SUI.SIZES,
+  },
+}
+
+Button.propTypes = {
+  /** An element type to render as (string or function). */
+  as: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+
+  /** A button can show it is currently the active user selection */
+  active: PropTypes.bool,
+
+  /** A button can animate to show hidden content */
+  animated: PropTypes.bool,
+
+  /** A button can be attached to the top or bottom of other content */
+  attached: PropTypes.oneOf(Button._meta.props.attached),
+
+  /** A basic button is less pronounced */
+  basic: PropTypes.bool,
+
+  /** Primary content of the button */
+  children: PropTypes.node,
+
+  /** A button can be circular */
+  circular: PropTypes.bool,
+
+  /** Classes to add to the button className. */
+  className: PropTypes.string,
+
+  /** A button can have different colors */
+  color: PropTypes.oneOf(Button._meta.props.color),
+
+  /** A button can reduce its padding to fit into tighter spaces */
+  compact: PropTypes.bool,
+
+  /** A button can show it is currently unable to be interacted with */
+  disabled: PropTypes.bool,
+
+  /** A button can be aligned to the left or right of its container */
+  floated: PropTypes.oneOf(Button._meta.props.floated),
+
+  /** A button can take the width of its container */
+  fluid: PropTypes.bool,
+
+  /** Add an icon by icon className or pass an <Icon /.>*/
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+  ]),
+
+  /** A button can be formatted to appear on dark backgrounds */
+  inverted: PropTypes.bool,
+
+  /** A button can appear alongside a label */
+  labeled: PropTypes.oneOf(Button._meta.props.labeled),
+
+  /** A button can show a loading indicator */
+  loading: PropTypes.bool,
+
+  /** */
+  negative: PropTypes.bool,
+
+  /** */
+  positive: PropTypes.bool,
+
+  /** */
+  primary: PropTypes.bool,
+
+  /** */
+  secondary: PropTypes.bool,
+
+  /** A button can be formatted to toggle on and off */
+  toggle: PropTypes.bool,
+
+  /**  */
+  type: PropTypes.string,
+
+  /** A button can have different sizes */
+  size: PropTypes.oneOf(Button._meta.props.size),
+}
+
+Button.defaultProps = {
+  as: 'button',
+  type: 'button',
 }
+
+export default Button
diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
new file mode 100644
index 0000000000..610d1e29bd
--- /dev/null
+++ b/src/elements/Button/ButtonGroup.js
@@ -0,0 +1,85 @@
+import cx from 'classnames'
+import React, { PropTypes } from 'react'
+
+import {
+  getElementType,
+  getUnhandledProps,
+  META,
+  SUI,
+  useKeyOnly,
+  useWidthProp,
+} from '../../lib'
+
+/**
+ * Button.Group
+ */
+function ButtonGroup(props) {
+  const {
+    basic, className, children, color, icon, size, vertical, widths,
+  } = props
+
+  const classes = cx('ui',
+    size,
+    color,
+    useKeyOnly(basic, 'basic'),
+    useKeyOnly(icon, 'icon'),
+    useKeyOnly(vertical, 'vertical'),
+    className,
+    useWidthProp(widths),
+    'buttons'
+  )
+
+  const rest = getUnhandledProps(ButtonGroup, props)
+  const ElementType = getElementType(ButtonGroup, props)
+
+  return (
+    <ElementType className={classes} {...rest}>
+      {children}
+    </ElementType>
+  )
+}
+
+ButtonGroup._meta = {
+  name: 'ButtonGroup',
+  parent: 'Button',
+  type: META.TYPES.ELEMENT,
+  props: {
+    color: SUI.COLORS,
+    size: SUI.SIZES,
+    widths: SUI.WIDTHS,
+  },
+}
+
+ButtonGroup.propTypes = {
+  /** An element type to render as (string or function). */
+  as: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+
+  /** A button group can be less pronounced */
+  basic: PropTypes.bool,
+
+  /** Class names for custom styling. */
+  className: PropTypes.string,
+
+  /** */
+  children: PropTypes.any,
+
+  /** Groups can have a shared color */
+  color: PropTypes.oneOf(ButtonGroup._meta.props.color),
+
+  /** Groups can be formatted as icons */
+  icon: PropTypes.bool,
+
+  /** A button can have different sizes */
+  size: PropTypes.oneOf(ButtonGroup._meta.props.size),
+
+  /** Groups can be formatted to appear vertically */
+  vertical: PropTypes.bool,
+
+  /** Groups can have their widths divided evenly */
+  widths: PropTypes.oneOf(ButtonGroup._meta.props.widths),
+}
+
+export default ButtonGroup
diff --git a/src/elements/Button/Buttons.js b/src/elements/Button/Buttons.js
deleted file mode 100644
index c79ed1d3b6..0000000000
--- a/src/elements/Button/Buttons.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component, PropTypes } from 'react'
-import classNames from 'classnames'
-import { getElementType, META } from '../../lib'
-
-export default class Buttons extends Component {
-  static propTypes = {
-    /** An element type to render as (string or function). */
-    as: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.func,
-    ]),
-
-    children: PropTypes.node,
-    className: PropTypes.string,
-  }
-
-  static _meta = {
-    name: 'Buttons',
-    type: META.TYPES.ELEMENT,
-    parent: 'Button',
-  }
-
-  render() {
-    const classes = classNames(
-      'ui',
-      this.props.className,
-      'buttons'
-    )
-    const ElementType = getElementType(Buttons, this.props)
-    return (
-      <ElementType {...this.props} className={classes}>
-        {this.props.children}
-      </ElementType>
-    )
-  }
-}
diff --git a/test/specs/elements/Button/Button-test.js b/test/specs/elements/Button/Button-test.js
index f25dd38646..78dd03a4b6 100644
--- a/test/specs/elements/Button/Button-test.js
+++ b/test/specs/elements/Button/Button-test.js
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import Button from 'src/elements/Button/Button'
+import ButtonGroup from 'src/elements/Button/ButtonGroup'
 import * as common from 'test/specs/commonTests'
 import { sandbox } from 'test/utils'
 
@@ -8,12 +9,30 @@ describe('Button', () => {
   common.isConformant(Button)
   common.hasUIClassName(Button)
   common.rendersChildren(Button)
+  common.hasSubComponents(Button, [ButtonGroup])
+
+  common.propKeyOnlyToClassName(Button, 'active')
+  common.propKeyOnlyToClassName(Button, 'animated')
+  common.propKeyOrValueToClassName(Button, 'attached')
+  common.propKeyOnlyToClassName(Button, 'basic')
+  common.propKeyOnlyToClassName(Button, 'circular')
+  common.propValueOnlyToClassName(Button, 'color')
+  common.propKeyOnlyToClassName(Button, 'compact')
+  common.propKeyOnlyToClassName(Button, 'disabled')
+  common.propKeyAndValueToClassName(Button, 'floated')
+  common.propKeyOnlyToClassName(Button, 'fluid')
+  common.implementsIconProp(Button)
+  common.propKeyOnlyToClassName(Button, 'inverted')
+  // common.propKeyOnlyToClassName(Button, 'labeled')
+  common.propKeyOnlyToClassName(Button, 'loading')
+  common.propKeyOnlyToClassName(Button, 'primary')
+  common.propKeyOnlyToClassName(Button, 'negative')
+  common.propKeyOnlyToClassName(Button, 'positive')
+  common.propKeyOnlyToClassName(Button, 'secondary')
+  common.propValueOnlyToClassName(Button, 'size')
+  common.propKeyOnlyToClassName(Button, 'toggle')
+
 
-  it('has type button by default', () => {
-    shallow(<Button />)
-      .find('button')
-      .should.have.prop('type', 'button')
-  })
   it('inherits type', () => {
     shallow(<Button type='submit' />)
       .find('button')
@@ -26,4 +45,23 @@ describe('Button', () => {
 
     handleClick.should.have.been.calledOnce()
   })
+
+  describe('tagName', () => {
+    it('has tagname=button by default', () => {
+      shallow(<Button />)
+        .first().type().should.equal('button')
+    })
+    it('has tagName=div when attached prop added', () => {
+      shallow(<Button attached='top' />)
+        .type().should.equal('div')
+    })
+    it('adds tabIndex=0 when tag type is div', () => {
+      shallow(<Button attached='top' />)
+        .should.have.prop('tabIndex', 0)
+    })
+    it('has tagName=button when type=submit', () => {
+      shallow(<Button type='submit' attached='top' />)
+        .type().should.equal('button')
+    })
+  })
 })
diff --git a/test/specs/elements/Button/ButtonGroup-test.js b/test/specs/elements/Button/ButtonGroup-test.js
index 54d78c788e..61cbff67ba 100644
--- a/test/specs/elements/Button/ButtonGroup-test.js
+++ b/test/specs/elements/Button/ButtonGroup-test.js
@@ -1,8 +1,17 @@
-import Buttons from 'src/elements/Button/Buttons'
+import ButtonGroup from 'src/elements/Button/ButtonGroup'
 import * as common from 'test/specs/commonTests'
 
-describe('Buttons', () => {
-  common.isConformant(Buttons)
-  common.hasUIClassName(Buttons)
-  common.rendersChildren(Buttons)
+describe('ButtonGroup', () => {
+  common.isConformant(ButtonGroup)
+  common.hasUIClassName(ButtonGroup)
+  common.rendersChildren(ButtonGroup)
+
+  common.propKeyOnlyToClassName(ButtonGroup, 'basic')
+  common.propKeyOnlyToClassName(ButtonGroup, 'icon')
+  common.propKeyOnlyToClassName(ButtonGroup, 'vertical')
+
+  common.propValueOnlyToClassName(ButtonGroup, 'color')
+  common.propValueOnlyToClassName(ButtonGroup, 'size')
+
+  common.implementsWidthProp(ButtonGroup, { propKey: 'widths', widthClass: 'buttons', canEqual: false })
 })