From 6a2abaafd14ce1c761eb05f5d633ff6e25bce1d5 Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Fri, 2 Nov 2018 12:47:10 +0200
Subject: [PATCH 1/6] breaking(Button): replace `type` prop with `secondary`
 and `primary`

---
 .github/CONTRIBUTING.md                       |  4 +-
 .../ButtonGroupCircularExample.shorthand.tsx  |  4 +-
 .../ButtonExampleDisabled.shorthand.tsx       |  6 +--
 .../Button/States/ButtonExampleDisabled.tsx   |  6 +--
 .../ButtonExampleContentAndIcon.shorthand.tsx |  4 +-
 .../Types/ButtonExampleContentAndIcon.tsx     |  4 +-
 .../Types/ButtonExampleEmphasis.shorthand.tsx |  4 +-
 .../Button/Types/ButtonExampleEmphasis.tsx    |  4 +-
 .../Types/ButtonExampleIcon.shorthand.tsx     |  2 +-
 .../Button/Types/ButtonExampleIcon.tsx        |  2 +-
 .../Types/ButtonExampleIconOnly.shorthand.tsx |  2 +-
 .../Button/Types/ButtonExampleIconOnly.tsx    |  2 +-
 ...uttonExampleEmphasisCircular.shorthand.tsx |  4 +-
 .../ButtonExampleEmphasisCircular.tsx         |  4 +-
 .../ButtonExampleText.shorthand.tsx           |  4 +-
 .../Button/Variations/ButtonExampleText.tsx   |  4 +-
 .../prototypes/chatPane/chatPaneHeader.tsx    |  2 +-
 .../components/MSTeamsMeetingOptions.tsx      |  2 +-
 docs/src/views/Accessibility.tsx              | 12 +++--
 docs/src/views/Glossary.tsx                   |  4 +-
 docs/src/views/QuickStart.tsx                 |  4 +-
 docs/src/views/ShorthandProps.tsx             | 10 +----
 docs/src/views/Theming.tsx                    |  8 ++--
 docs/src/views/ThemingExamples.tsx            | 44 +++++++++----------
 src/components/Button/Button.tsx              | 21 ++++++---
 .../teams/components/Button/buttonStyles.ts   |  3 +-
 test/specs/components/Button/Button-test.tsx  | 25 ++++-------
 27 files changed, 92 insertions(+), 103 deletions(-)

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 6e5e37f285..d4ca2bf767 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -77,7 +77,7 @@ In addition to behaviors, ARIA [landmarks][5] and [naming props][6] need to be a
 
 For example, to make an icon-only Button accessible, `aria-label` prop needs to be used:
 ```html
-  <Button type="primary" icon="star" iconOnly aria-label='Favorites' />
+  <Button icon="star" iconOnly aria-label='Favorites' primary />
 ```
 
 ### Focus
@@ -109,4 +109,4 @@ In addition to basic focus handling, specific keyboard handlers can be added to
 [10]: https://github.com/stardust-ui/react/blob/master/src/components/Button/Button.tsx
 [11]: https://github.com/stardust-ui/react/blob/master/src/themes/teams/components/Button/buttonStyles.ts
 [12]: https://github.com/stardust-ui/react/blob/master/src/lib/accessibility/Behaviors/Menu/MenuItemBehavior.ts
-[13]: https://github.com/stardust-ui/react/blob/master/src/components/Menu/MenuItem.tsx
\ No newline at end of file
+[13]: https://github.com/stardust-ui/react/blob/master/src/components/Menu/MenuItem.tsx
diff --git a/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx b/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
index b2ea758ec3..1816b2b699 100644
--- a/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
@@ -5,9 +5,9 @@ const ButtonGroupCircularExampleShorthand = () => (
   <Button.Group
     circular
     buttons={[
-      { key: 'book', icon: 'book', type: 'primary' },
+      { key: 'book', icon: 'book', primary: true },
       { key: 'coffee', icon: 'coffee' },
-      { key: 'play', icon: 'play', type: 'primary' },
+      { key: 'play', icon: 'play', primary: true },
     ]}
   />
 )
diff --git a/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx b/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
index 4478806faa..ca60a1ecdf 100644
--- a/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
+++ b/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
@@ -4,9 +4,9 @@ import { Button } from '@stardust-ui/react'
 const ButtonExampleDisabled = () => (
   <div>
     <Button disabled content="Default" />
-    <Button disabled type="primary" content="Primary" />
-    <Button disabled type="secondary" content="Secondary" />
-    <Button disabled type="primary" icon="book" content="Click me" iconPosition="before" />
+    <Button disabled content="Primary" primary />
+    <Button disabled content="Secondary" secondary />
+    <Button disabled icon="book" content="Click me" iconPosition="before" primary />
     <Button disabled circular icon="coffee" />
     <br />
     <br />
diff --git a/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx b/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
index df7a2eac66..182d0c7c39 100644
--- a/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
+++ b/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
@@ -4,13 +4,13 @@ import { Button, Icon, Text } from '@stardust-ui/react'
 const ButtonExampleDisabled = () => (
   <div>
     <Button disabled>Default</Button>
-    <Button disabled type="primary">
+    <Button disabled primary>
       Primary
     </Button>
-    <Button disabled type="secondary">
+    <Button disabled secondary>
       Secondary
     </Button>
-    <Button disabled type="primary" icon iconPosition="before">
+    <Button disabled icon iconPosition="before" primary>
       <Icon name="book" xSpacing="after" />
       <Text content="Click me" />
     </Button>
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx
index cc23982083..22fc2e32bd 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx
@@ -3,8 +3,8 @@ import { Button } from '@stardust-ui/react'
 
 const ButtonExampleContentAndIcon = () => (
   <div>
-    <Button type="primary" icon="book" content="Click me before" iconPosition="before" />
-    <Button type="secondary" icon="coffee" content="Click me after" iconPosition="after" />
+    <Button icon="book" content="Click me before" iconPosition="before" primary />
+    <Button icon="coffee" content="Click me after" iconPosition="after" secondary />
   </div>
 )
 
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx
index dcbd50506f..389026b5cc 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx
@@ -3,11 +3,11 @@ import { Button, Icon, Text } from '@stardust-ui/react'
 
 const ButtonExampleContentAndIcon = () => (
   <div>
-    <Button type="primary" icon iconPosition="before">
+    <Button icon iconPosition="before" primary>
       <Icon name="book" xSpacing="after" variables={{ color: 'white' }} />
       <Text content="Click me before" />
     </Button>
-    <Button type="secondary" icon iconPosition="after">
+    <Button icon iconPosition="after" secondary>
       <Text content="Click me after" />
       <Icon name="coffee" xSpacing="before" />
     </Button>
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx
index 07c60bcf41..d7583281bc 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx
@@ -3,8 +3,8 @@ import { Button } from '@stardust-ui/react'
 
 const ButtonExampleEmphasis = () => (
   <div>
-    <Button type="primary" content="Primary" />
-    <Button type="secondary" content="Secondary" />
+    <Button content="Primary" primary />
+    <Button content="Secondary" secondary />
   </div>
 )
 
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx
index 61766ca8c9..2d8a977d9f 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx
@@ -3,8 +3,8 @@ import { Button } from '@stardust-ui/react'
 
 const ButtonExampleEmphasis = () => (
   <div>
-    <Button type="primary">Primary</Button>
-    <Button type="secondary">Secondary</Button>
+    <Button primary>Primary</Button>
+    <Button secondary>Secondary</Button>
   </div>
 )
 
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx
index 4f5c334d77..9595a2f47b 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Button } from '@stardust-ui/react'
 
-const ButtonExampleIcon = () => <Button type="primary" icon="book" />
+const ButtonExampleIcon = () => <Button icon="book" primary />
 
 export default ButtonExampleIcon
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx
index 30d424bfd5..45053ada32 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, Icon } from '@stardust-ui/react'
 
 const ButtonExampleIcon = () => (
-  <Button type="primary" icon>
+  <Button icon primary>
     <Icon name="book" xSpacing="none" />
   </Button>
 )
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx
index 3e93bf505e..6d70645017 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Button } from '@stardust-ui/react'
 
-const ButtonExampleIconOnly = () => <Button type="primary" icon="book" iconOnly />
+const ButtonExampleIconOnly = () => <Button icon="book" iconOnly primary />
 
 export default ButtonExampleIconOnly
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx
index 8b1f221ee6..eb1e5cdcac 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, Icon } from '@stardust-ui/react'
 
 const ButtonExampleIconOnly = () => (
-  <Button type="primary" icon iconOnly>
+  <Button icon iconOnly primary>
     <Icon name="book" xSpacing="none" />
   </Button>
 )
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx
index a30662a15f..835f4bb1a5 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx
@@ -3,8 +3,8 @@ import { Button } from '@stardust-ui/react'
 
 const ButtonExampleEmphasisCircular = () => (
   <div>
-    <Button type="primary" circular icon="coffee" />
-    <Button type="secondary" circular icon="book" />
+    <Button circular icon="coffee" primary />
+    <Button circular icon="book" secondary />
   </div>
 )
 
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx
index f660fb2772..8d72d2da3e 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx
@@ -3,10 +3,10 @@ import { Button, Icon } from '@stardust-ui/react'
 
 const ButtonExampleEmphasisCircular = () => (
   <div>
-    <Button type="primary" circular icon>
+    <Button circular icon primary>
       <Icon name="coffee" xSpacing="none" />
     </Button>
-    <Button type="secondary" circular icon>
+    <Button circular icon secondary>
       <Icon name="book" xSpacing="none" />
     </Button>
   </div>
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx
index c4c2adcdfe..309f66706c 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx
@@ -4,8 +4,8 @@ import { Button } from '@stardust-ui/react'
 const ButtonExampleTextShorthand = () => (
   <div>
     <Button text icon="book" content="Default" iconPosition="before" />
-    <Button text type="primary" content="Primary" />
-    <Button text type="secondary" content="Secondary" />
+    <Button text content="Primary" primary />
+    <Button text content="Secondary" secondary />
     <Button text iconOnly icon="compass outline" />
   </div>
 )
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx
index b794c574cc..04bb679907 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx
@@ -7,10 +7,10 @@ const ButtonExampleText = () => (
       <Icon name="book" xSpacing="after" />
       <Text content="Default" />
     </Button>
-    <Button text type="primary">
+    <Button text primary>
       Primary
     </Button>
-    <Button text type="secondary">
+    <Button text secondary>
       Secondary
     </Button>
     <Button text circular>
diff --git a/docs/src/prototypes/chatPane/chatPaneHeader.tsx b/docs/src/prototypes/chatPane/chatPaneHeader.tsx
index 044b5285f4..68dd7f3ee0 100644
--- a/docs/src/prototypes/chatPane/chatPaneHeader.tsx
+++ b/docs/src/prototypes/chatPane/chatPaneHeader.tsx
@@ -74,7 +74,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
               size: 'big',
               variables: siteVars => ({ color: siteVars.white, margin: 'auto 8px' }),
             },
-            type: 'primary',
+            primary: true,
           }))}
           styles={{ marginRight: '20px' }}
         />
diff --git a/docs/src/prototypes/meetingOptions/components/MSTeamsMeetingOptions.tsx b/docs/src/prototypes/meetingOptions/components/MSTeamsMeetingOptions.tsx
index 87d5697e3c..d8343a64fb 100644
--- a/docs/src/prototypes/meetingOptions/components/MSTeamsMeetingOptions.tsx
+++ b/docs/src/prototypes/meetingOptions/components/MSTeamsMeetingOptions.tsx
@@ -26,7 +26,7 @@ export default () => {
           <Input placeholder="People in my organization" fluid />
         </Grid>
         <TransparentDivider size={10} />
-        <Button type="primary" content="Save" styles={{ float: 'right', margin: '0px' }} />
+        <Button content="Save" styles={{ float: 'right', margin: '0px' }} primary />
       </div>
     </div>
   )
diff --git a/docs/src/views/Accessibility.tsx b/docs/src/views/Accessibility.tsx
index 5578892098..a13ce49992 100644
--- a/docs/src/views/Accessibility.tsx
+++ b/docs/src/views/Accessibility.tsx
@@ -485,11 +485,9 @@ export default () => (
     </p>
     <p>Example:</p>
     <CodeSnippet
-      value={[
-        'return (',
-        ' <Button type="primary" icon="book" aria-label="Confirm booking"/>',
-        ')',
-      ].join('\n')}
+      value={['return (', ' <Button icon="book" aria-label="Confirm booking" primary />', ')'].join(
+        '\n',
+      )}
     />
     <p>Rendered HTML:</p>
     <CodeSnippet
@@ -526,17 +524,17 @@ export default () => (
     <Button
       as={NavLink}
       content="Stardust Glossary"
-      type="primary"
       icon="arrow left"
       iconPosition="before"
+      primary
       to="glossary"
     />
     <Button
       as={NavLink}
       content="Theming"
-      type="primary"
       icon="arrow right"
       iconPosition="after"
+      primary
       to="theming"
     />
   </DocPage>
diff --git a/docs/src/views/Glossary.tsx b/docs/src/views/Glossary.tsx
index e56e8ed4d3..10aafd046a 100644
--- a/docs/src/views/Glossary.tsx
+++ b/docs/src/views/Glossary.tsx
@@ -194,17 +194,17 @@ export default () => (
     <Button
       as={NavLink}
       content="Quick Start"
-      type="primary"
       icon="arrow left"
       iconPosition="before"
+      primary
       to="quick-start"
     />
     <Button
       as={NavLink}
       content="Accessibility"
-      type="primary"
       icon="arrow right"
       iconPosition="after"
+      primary
       to="accessibility"
     />
   </DocPage>
diff --git a/docs/src/views/QuickStart.tsx b/docs/src/views/QuickStart.tsx
index f6c1a99f31..99a66f3b63 100644
--- a/docs/src/views/QuickStart.tsx
+++ b/docs/src/views/QuickStart.tsx
@@ -52,7 +52,7 @@ export default () => (
         `import { Button } from '@stardust-ui/react'`,
         ``,
         `export default () => (`,
-        `  <Button type="primary" content="Theming" icon="arrow right" iconPosition="after" />`,
+        `  <Button content="Theming" icon="arrow right" iconPosition="after" primary />`,
         `)`,
       ].join('\n')}
     />
@@ -63,9 +63,9 @@ export default () => (
     <Button
       as={NavLink}
       content="Stardust Glossary"
-      type="primary"
       icon="arrow right"
       iconPosition="after"
+      primary
       to="glossary"
     />
   </DocPage>
diff --git a/docs/src/views/ShorthandProps.tsx b/docs/src/views/ShorthandProps.tsx
index 3f332ebdb5..af300df509 100644
--- a/docs/src/views/ShorthandProps.tsx
+++ b/docs/src/views/ShorthandProps.tsx
@@ -27,19 +27,13 @@ class ShorthandProps extends React.Component {
         </p>
         <CodeSnippet
           value={[
-            `<Button type="primary" icon iconOnly>`,
+            `<Button icon iconOnly primary>`,
             `  <Icon name="book" xSpacing="none" />`,
             `</Button>`,
           ].join('\n')}
         />
         <br />
-        <Button
-          as={NavLink}
-          content="Quick Start"
-          type="primary"
-          icon="arrow right"
-          to="quick-start"
-        />
+        <Button as={NavLink} content="Quick Start" icon="arrow right" primary to="quick-start" />
       </DocPage>
     )
   }
diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx
index fb82be3dac..a9587060a0 100644
--- a/docs/src/views/Theming.tsx
+++ b/docs/src/views/Theming.tsx
@@ -40,7 +40,7 @@ export default () => (
       value={[
         `<Provider theme={{ siteVariables: { brand: 'hotpink' } }}>`,
         `  <div>`,
-        `    <Button type="primary">Branding</Button>`,
+        `    <Button primary>Branding</Button>`,
         `    <Divider type="primary">Branding</Divider>`,
         `  </div>`,
         `</Provider>`,
@@ -48,7 +48,7 @@ export default () => (
       render={() => (
         <Provider theme={{ siteVariables: { brand: 'hotpink' }, componentVariables: {} }}>
           <div>
-            <Button type="primary">Branding</Button>
+            <Button primary>Branding</Button>
             <Divider type="primary">Branding</Divider>
           </div>
         </Provider>
@@ -214,17 +214,17 @@ export default () => (
     <Button
       as={NavLink}
       content="Accessibility"
-      type="primary"
       icon="arrow left"
       iconPosition="before"
+      primary
       to="/accessibility"
     />
     <Button
       as={NavLink}
       content="Theming Examples"
-      type="primary"
       icon="arrow right"
       iconPosition="after"
+      primary
       to="theming-examples"
     />
   </DocPage>
diff --git a/docs/src/views/ThemingExamples.tsx b/docs/src/views/ThemingExamples.tsx
index 1a13ddcc9c..dd56b3da45 100644
--- a/docs/src/views/ThemingExamples.tsx
+++ b/docs/src/views/ThemingExamples.tsx
@@ -49,8 +49,8 @@ export default () => (
         ` <Provider>`,
         `  <>`,
         `    <Button content="Button" />`,
-        `    <Button type="primary" icon="plus" iconOnly />`,
-        `    <Button type="secondary" icon="at" content="Send email" />`,
+        `    <Button icon="plus" iconOnly primary />`,
+        `    <Button icon="at" content="Send email" secondary />`,
         `    <Icon name="chess rook" size="big" />`,
         `    <Label content="Label with icon" icon="close" />`,
         `    <br/><br/>`,
@@ -62,8 +62,8 @@ export default () => (
       render={() => (
         <>
           <Button content="Button" />
-          <Button type="primary" icon="plus" iconOnly />
-          <Button type="secondary" icon="at" content="Send email" />
+          <Button icon="plus" iconOnly primary />
+          <Button icon="at" content="Send email" secondary />
           <Icon name="chess rook" size="big" />
           <Label content="Label with icon" icon="close" />
           <br />
@@ -96,12 +96,12 @@ export default () => (
         `      }`,
         `const btnExample = () => `,
         `    <Button`,
-        `      type="secondary"`,
         `      content="Send email"`,
         `      icon={{`,
         `        name: "at",`,
         `        styles: { color: "brown" }`,
         `      }}`,
+        `      secondary`,
         `      styles={styles} />`,
         ``,
         `export default btnExample`,
@@ -145,9 +145,9 @@ export default () => (
       ].join('\n')}
       render={() => (
         <Button
-          type="secondary"
           content="Send email"
           icon={{ name: 'at', variables: { color: 'brown' } }}
+          secondary
           variables={{
             secondaryColor: 'coral',
             secondaryBackgroundColor: 'charcoal',
@@ -220,8 +220,8 @@ export default () => (
         `  <Provider theme={theme}>`,
         `    <div>`,
         `      <Button content="Button" />`,
-        `      <Button type="primary" icon="plus" iconOnly />`,
-        `      <Button type="secondary" icon="at" content="Send email" />`,
+        `      <Button icon="plus" iconOnly primary />`,
+        `      <Button icon="at" content="Send email" secondary />`,
         `      <Icon name="chess rook" size="big" />`,
         `      <Label content="Label with icon" icon="close" />`,
         `      <br /><br />`,
@@ -267,8 +267,8 @@ export default () => (
           >
             <div>
               <Button content="Button" />
-              <Button type="primary" icon="plus" iconOnly />
-              <Button type="secondary" icon="at" content="Send email" />
+              <Button icon="plus" iconOnly primary />
+              <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
               <br />
@@ -291,7 +291,7 @@ export default () => (
         `<div>`,
         `  /* Default theming */`,
         `  <Header as="h3" content="Default" />`,
-        `  <Button type="primary">Branding</Button>`,
+        `  <Button primary>Branding</Button>`,
         `  <Divider type="primary">Branding</Divider>`,
         ``,
         `  /* First nested theming */`,
@@ -304,8 +304,8 @@ export default () => (
         `      <Header as="h3" content="First nested theming" />`,
         ``,
         `      <Button content="Button" />`,
-        `      <Button type="primary" icon="plus" iconOnly />`,
-        `      <Button type="secondary" icon="at" content="Send email" />`,
+        `      <Button icon="plus" iconOnly primary />`,
+        `      <Button icon="at" content="Send email" secondary />`,
         `      <Icon name="chess rook" size="big" />`,
         `      <Label content="Label with icon" icon="close" />`,
         `      <br/><br/>`,
@@ -326,8 +326,8 @@ export default () => (
         `          <Header as="h3" content="Second nested theming" />`,
         ``,
         `          <Button content="Button" />`,
-        `          <Button type="primary" icon="plus" iconOnly />`,
-        `          <Button type="secondary" icon="at" content="Send email" />`,
+        `          <Button icon="plus" iconOnly primary />`,
+        `          <Button icon="at" content="Send email" secondary />`,
         `          <Icon name="chess rook" size="big" />`,
         `          <Label content="Label with icon" icon="close" />`,
         `          <br/><br/>`,
@@ -343,8 +343,8 @@ export default () => (
         <div>
           <Header as="h3" content="Default theming" />
           <Button content="Button" />
-          <Button type="primary" icon="plus" iconOnly />
-          <Button type="secondary" icon="at" content="Send email" />
+          <Button icon="plus" iconOnly primary />
+          <Button icon="at" content="Send email" secondary />
           <Icon name="chess rook" size="big" />
           <Label content="Label with icon" icon="close" />
           <br />
@@ -361,8 +361,8 @@ export default () => (
               <Header as="h3" content="First nested theming" />
 
               <Button content="Button" />
-              <Button type="primary" icon="plus" iconOnly />
-              <Button type="secondary" icon="at" content="Send email" />
+              <Button icon="plus" iconOnly primary />
+              <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
               <br />
@@ -383,8 +383,8 @@ export default () => (
                   <Header as="h3" content="Second nested theming" />
 
                   <Button content="Button" />
-                  <Button type="primary" icon="plus" iconOnly />
-                  <Button type="secondary" icon="at" content="Send email" />
+                  <Button icon="plus" iconOnly primary />
+                  <Button icon="at" content="Send email" secondary />
                   <Icon name="chess rook" size="big" />
                   <Label content="Label with icon" icon="close" />
                   <br />
@@ -404,9 +404,9 @@ export default () => (
     <Button
       as={NavLink}
       content="Theming"
-      type="primary"
       icon="arrow left"
       iconPosition="before"
+      primary
       to="theming"
     />
   </DocPage>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 68aa964e0b..c000615274 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -32,9 +32,11 @@ export interface ButtonProps {
   iconPosition?: 'before' | 'after'
   onClick?: ComponentEventHandler<ButtonProps>
   onFocus?: ComponentEventHandler<ButtonProps>
+  primary?: boolean
   renderIcon?: ShorthandRenderFunction
   text?: boolean
-  type?: 'primary' | 'secondary'
+  type?: 'type' | 'submit' | 'reset'
+  secondary?: boolean
   styles?: ComponentSlotStyle
   variables?: ComponentVariablesInput
 }
@@ -105,11 +107,17 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
      */
     onFocus: PropTypes.func,
 
+    /** A button can be formatted to show different levels of emphasis. */
+    primary: PropTypes.bool,
+
     /** A button can be formatted to show only text in order to indicate some less-pronounced actions. */
     text: PropTypes.bool,
 
+    /** The type prop specifies the type of button. */
+    type: PropTypes.oneOf(['button', 'submit', 'reset']),
+
     /** A button can be formatted to show different levels of emphasis. */
-    type: PropTypes.oneOf(['primary', 'secondary']),
+    secondary: PropTypes.bool,
 
     /** Accessibility behavior if overridden by the user. */
     accessibility: PropTypes.func,
@@ -147,7 +155,7 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
     styles,
     rest,
   }): React.ReactNode {
-    const { children, content, disabled, iconPosition } = this.props
+    const { children, content, disabled, iconPosition, type } = this.props
     const hasChildren = childrenExist(children)
 
     return (
@@ -156,6 +164,7 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
         disabled={disabled}
         onClick={this.handleClick}
         onFocus={this.handleFocus}
+        type={type}
         {...accessibility.attributes.root}
         {...rest}
       >
@@ -183,16 +192,14 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
   }
 
   private handleClick = (e: React.SyntheticEvent) => {
-    const { onClick, disabled } = this.props
+    const { disabled } = this.props
 
     if (disabled) {
       e.preventDefault()
       return
     }
 
-    if (onClick) {
-      onClick(e, this.props)
-    }
+    _.invoke(this.props, 'onClick', e, this.props)
   }
 
   private handleFocus = (e: React.SyntheticEvent) => {
diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts
index d093b74736..ab2b023196 100644
--- a/src/themes/teams/components/Button/buttonStyles.ts
+++ b/src/themes/teams/components/Button/buttonStyles.ts
@@ -5,8 +5,7 @@ import { truncateStyle } from '../../../../styles/customCSS'
 
 const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
   root: ({ props, variables }): ICSSInJSStyle => {
-    const { circular, disabled, fluid, type, text, iconOnly, isFromKeyboard } = props
-    const primary = type === 'primary'
+    const { circular, disabled, fluid, primary, text, iconOnly, isFromKeyboard } = props
 
     const {
       height,
diff --git a/test/specs/components/Button/Button-test.tsx b/test/specs/components/Button/Button-test.tsx
index 5ba96cde98..a7cffbb456 100644
--- a/test/specs/components/Button/Button-test.tsx
+++ b/test/specs/components/Button/Button-test.tsx
@@ -129,29 +129,20 @@ describe('Button', () => {
   })
 
   describe('type', () => {
-    const typeProp = 'type'
+    const types = ['button', 'submit', 'button']
 
     test('is not set by default', () => {
-      const btnType = mountWithProviderAndGetComponent(Button, <Button />).prop(typeProp)
-      expect(btnType).toBeUndefined()
-    })
-
-    test('can be set to primary', () => {
-      const type = 'primary'
-      const btnType = mountWithProviderAndGetComponent(Button, <Button type={type} />).prop(
-        typeProp,
-      )
+      const renderedComponent = mountWithProviderAndGetComponent(Button, <Button />)
 
-      expect(btnType).toEqual(type)
+      expect(renderedComponent.prop('type')).toBeUndefined()
     })
 
-    test('can be set to secondary', () => {
-      const type = 'secondary'
-      const btnType = mountWithProviderAndGetComponent(Button, <Button type={type} />).prop(
-        typeProp,
-      )
+    types.forEach(type => {
+      test(`can be set to "${type}"`, () => {
+        const renderedComponent = mountWithProviderAndGetComponent(Button, <Button type={type} />)
 
-      expect(btnType).toEqual(type)
+        expect(renderedComponent.prop('type')).toEqual(type)
+      })
     })
   })
 

From 746fb4e3454cee2aebe97257341332ce3dfaba6a Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Fri, 2 Nov 2018 12:52:23 +0200
Subject: [PATCH 2/6] restore changes

---
 docs/src/views/Accessibility.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/src/views/Accessibility.tsx b/docs/src/views/Accessibility.tsx
index a13ce49992..32ae9ac128 100644
--- a/docs/src/views/Accessibility.tsx
+++ b/docs/src/views/Accessibility.tsx
@@ -485,9 +485,11 @@ export default () => (
     </p>
     <p>Example:</p>
     <CodeSnippet
-      value={['return (', ' <Button icon="book" aria-label="Confirm booking" primary />', ')'].join(
-        '\n',
-      )}
+      value={[
+        'return (',
+        ' <Button icon="book" aria-label="Confirm booking" primary />',
+        ')',
+      ].join('\n')}
     />
     <p>Rendered HTML:</p>
     <CodeSnippet

From 849e808a20ad997eff45af887d6f123d429acfa1 Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Fri, 2 Nov 2018 12:58:37 +0200
Subject: [PATCH 3/6] restore changes

---
 docs/src/views/Accessibility.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/docs/src/views/Accessibility.tsx b/docs/src/views/Accessibility.tsx
index 32ae9ac128..a13ce49992 100644
--- a/docs/src/views/Accessibility.tsx
+++ b/docs/src/views/Accessibility.tsx
@@ -485,11 +485,9 @@ export default () => (
     </p>
     <p>Example:</p>
     <CodeSnippet
-      value={[
-        'return (',
-        ' <Button icon="book" aria-label="Confirm booking" primary />',
-        ')',
-      ].join('\n')}
+      value={['return (', ' <Button icon="book" aria-label="Confirm booking" primary />', ')'].join(
+        '\n',
+      )}
     />
     <p>Rendered HTML:</p>
     <CodeSnippet

From c31ebc994ccb47c6bdc885c6337f45b6a6378df8 Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Fri, 2 Nov 2018 13:21:11 +0200
Subject: [PATCH 4/6] fix(Button): remove `type` prop at all

---
 src/components/Button/Button.tsx             |  7 +------
 test/specs/components/Button/Button-test.tsx | 18 ------------------
 2 files changed, 1 insertion(+), 24 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index c000615274..4636f219c4 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -35,7 +35,6 @@ export interface ButtonProps {
   primary?: boolean
   renderIcon?: ShorthandRenderFunction
   text?: boolean
-  type?: 'type' | 'submit' | 'reset'
   secondary?: boolean
   styles?: ComponentSlotStyle
   variables?: ComponentVariablesInput
@@ -113,9 +112,6 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
     /** A button can be formatted to show only text in order to indicate some less-pronounced actions. */
     text: PropTypes.bool,
 
-    /** The type prop specifies the type of button. */
-    type: PropTypes.oneOf(['button', 'submit', 'reset']),
-
     /** A button can be formatted to show different levels of emphasis. */
     secondary: PropTypes.bool,
 
@@ -155,7 +151,7 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
     styles,
     rest,
   }): React.ReactNode {
-    const { children, content, disabled, iconPosition, type } = this.props
+    const { children, content, disabled, iconPosition } = this.props
     const hasChildren = childrenExist(children)
 
     return (
@@ -164,7 +160,6 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
         disabled={disabled}
         onClick={this.handleClick}
         onFocus={this.handleFocus}
-        type={type}
         {...accessibility.attributes.root}
         {...rest}
       >
diff --git a/test/specs/components/Button/Button-test.tsx b/test/specs/components/Button/Button-test.tsx
index a7cffbb456..aeacd629bd 100644
--- a/test/specs/components/Button/Button-test.tsx
+++ b/test/specs/components/Button/Button-test.tsx
@@ -128,24 +128,6 @@ describe('Button', () => {
     })
   })
 
-  describe('type', () => {
-    const types = ['button', 'submit', 'button']
-
-    test('is not set by default', () => {
-      const renderedComponent = mountWithProviderAndGetComponent(Button, <Button />)
-
-      expect(renderedComponent.prop('type')).toBeUndefined()
-    })
-
-    types.forEach(type => {
-      test(`can be set to "${type}"`, () => {
-        const renderedComponent = mountWithProviderAndGetComponent(Button, <Button type={type} />)
-
-        expect(renderedComponent.prop('type')).toEqual(type)
-      })
-    })
-  })
-
   describe('circular', () => {
     const circularProp = 'circular'
 

From b5428b5638404d78c30f646e4ae66b98a7c09010 Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Fri, 2 Nov 2018 13:26:25 +0200
Subject: [PATCH 5/6] test(Button): add a test for `onClick`

---
 test/specs/components/Button/Button-test.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/test/specs/components/Button/Button-test.tsx b/test/specs/components/Button/Button-test.tsx
index aeacd629bd..3d6984d589 100644
--- a/test/specs/components/Button/Button-test.tsx
+++ b/test/specs/components/Button/Button-test.tsx
@@ -153,5 +153,18 @@ describe('Button', () => {
 
       expect(onClick).not.toHaveBeenCalled()
     })
+
+    test('is called with (e, props) on a click', () => {
+      const onClick = jest.fn()
+      const button = mountWithProviderAndGetComponent(Button, <Button onClick={onClick} />)
+
+      button.simulate('click')
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({ type: 'click' }),
+        expect.objectContaining({ onClick }),
+      )
+    })
   })
 })

From 2affefa570382d2035cee25cf13102d48356933a Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Fri, 2 Nov 2018 14:45:36 +0200
Subject: [PATCH 6/6] doc(CHANGELOG): add entry

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e94ad98cf2..0ea578b1e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING
+- Replace the `type` prop with `secondary` and `primary` for `Button` @layershifter ([#419](https://github.com/stardust-ui/react/pull/419))
+
 ### Fixes
 - Fix endMedia to not be removed from DOM on mouseleave for `ListItem` @musingh1 ([#278](https://github.com/stardust-ui/react/pull/278))