diff --git a/ui_framework/components/button/__snapshots__/button.test.js.snap b/ui_framework/components/button/__snapshots__/button.test.js.snap
index 28b1c59bf466e..41936abf127af 100644
--- a/ui_framework/components/button/__snapshots__/button.test.js.snap
+++ b/ui_framework/components/button/__snapshots__/button.test.js.snap
@@ -56,17 +56,7 @@ exports[`KuiButton Props icon is rendered without children 1`] = `
 </button>
 `;
 
-exports[`KuiButton Props isDisabled sets the disabled attribute 1`] = `
-<button
-  className="kuiButton"
-  disabled={true}
-  onClick={[Function]}
->
-  <span />
-</button>
-`;
-
-exports[`KuiButton Props isIconOnRight moves the icon to the right 1`] = `
+exports[`KuiButton Props iconPosition moves the icon to the right 1`] = `
 <button
   className="kuiButton kuiButton--iconText"
   onClick={[Function]}
@@ -80,6 +70,16 @@ exports[`KuiButton Props isIconOnRight moves the icon to the right 1`] = `
 </button>
 `;
 
+exports[`KuiButton Props isDisabled sets the disabled attribute 1`] = `
+<button
+  className="kuiButton"
+  disabled={true}
+  onClick={[Function]}
+>
+  <span />
+</button>
+`;
+
 exports[`KuiButton Props isLoading doesn't render the icon prop 1`] = `
 <button
   className="kuiButton kuiButton--iconText"
@@ -87,7 +87,7 @@ exports[`KuiButton Props isLoading doesn't render the icon prop 1`] = `
 >
   <span>
     <KuiButtonIcon
-      type="LOADING"
+      type="loading"
     />
   </span>
 </button>
@@ -100,7 +100,7 @@ exports[`KuiButton Props isLoading renders a spinner 1`] = `
 >
   <span>
     <KuiButtonIcon
-      type="LOADING"
+      type="loading"
     />
   </span>
 </button>
diff --git a/ui_framework/components/button/__snapshots__/link_button.test.js.snap b/ui_framework/components/button/__snapshots__/link_button.test.js.snap
index dd0d5698fcf88..e50e913e415dd 100644
--- a/ui_framework/components/button/__snapshots__/link_button.test.js.snap
+++ b/ui_framework/components/button/__snapshots__/link_button.test.js.snap
@@ -66,17 +66,7 @@ exports[`KuiLinkButton Props icon is rendered without children 1`] = `
 </a>
 `;
 
-exports[`KuiLinkButton Props isDisabled sets the disabled attribute 1`] = `
-<a
-  className="kuiButton"
-  disabled={true}
-  onClick={[Function]}
->
-  <span />
-</a>
-`;
-
-exports[`KuiLinkButton Props isIconOnRight moves the icon to the right 1`] = `
+exports[`KuiLinkButton Props iconPosition moves the icon to the right 1`] = `
 <a
   className="kuiButton kuiButton--iconText"
   onClick={[Function]}
@@ -90,6 +80,16 @@ exports[`KuiLinkButton Props isIconOnRight moves the icon to the right 1`] = `
 </a>
 `;
 
+exports[`KuiLinkButton Props isDisabled sets the disabled attribute 1`] = `
+<a
+  className="kuiButton"
+  disabled={true}
+  onClick={[Function]}
+>
+  <span />
+</a>
+`;
+
 exports[`KuiLinkButton Props isLoading doesn't render the icon prop 1`] = `
 <a
   className="kuiButton kuiButton--iconText"
@@ -97,7 +97,7 @@ exports[`KuiLinkButton Props isLoading doesn't render the icon prop 1`] = `
 >
   <span>
     <KuiButtonIcon
-      type="LOADING"
+      type="loading"
     />
   </span>
 </a>
@@ -110,7 +110,7 @@ exports[`KuiLinkButton Props isLoading renders a spinner 1`] = `
 >
   <span>
     <KuiButtonIcon
-      type="LOADING"
+      type="loading"
     />
   </span>
 </a>
diff --git a/ui_framework/components/button/button.js b/ui_framework/components/button/button.js
index 308e27d6e021b..77d945497b281 100644
--- a/ui_framework/components/button/button.js
+++ b/ui_framework/components/button/button.js
@@ -8,7 +8,12 @@ import keyMirror from 'keymirror';
 import { KuiButtonIcon } from './button_icon/button_icon';
 
 const commonPropTypes = {
-  type: PropTypes.string,
+  type: PropTypes.oneOf([
+    'basic',
+    'hollow',
+    'danger',
+    'primary',
+  ]),
   testSubject: PropTypes.string,
   isDisabled: PropTypes.bool,
   onClick: PropTypes.func,
@@ -16,22 +21,36 @@ const commonPropTypes = {
   className: PropTypes.string,
 };
 
+const nonVoidPropTypes = {
+  icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf([
+    'left',
+    'right',
+  ]),
+  children: PropTypes.node,
+  isLoading: PropTypes.bool,
+};
+
+const nonVoidDefaultProps = {
+  iconPosition: 'left',
+};
+
 const getIcon = props => (
   props.isLoading
-    ? <KuiButtonIcon type={KuiButtonIcon.TYPE.LOADING} />
+    ? <KuiButtonIcon type="loading" />
     : props.icon
 );
 
 const getClassName = (props, icon) => {
   const typeToClassNameMap = {
-    [KuiButton.TYPE.BASIC]: 'kuiButton--basic',
-    [KuiButton.TYPE.HOLLOW]: 'kuiButton--hollow',
-    [KuiButton.TYPE.DANGER]: 'kuiButton--danger',
-    [KuiButton.TYPE.PRIMARY]: 'kuiButton--primary',
+    basic: 'kuiButton--basic',
+    hollow: 'kuiButton--hollow',
+    danger: 'kuiButton--danger',
+    primary: 'kuiButton--primary',
   };
 
   return classNames('kuiButton', props.className, {
-    [typeToClassNameMap[KuiButton.TYPE[props.type]]]: props.type,
+    [typeToClassNameMap[props.type]]: props.type,
     'kuiButton--iconText': icon,
   });
 };
@@ -41,18 +60,23 @@ const getChildren = (props, icon) => {
   // correctly.
   const wrappedChildren = props.children ? <span>{props.children}</span> : undefined;
 
-  return props.isIconOnRight
-    ? (
-      <span>
-        {wrappedChildren}
-        {icon}
-      </span>
-    ) : (
-      <span>
-        {icon}
-        {wrappedChildren}
-      </span>
-    );
+  switch(props.iconPosition) {
+    case 'left':
+      return (
+        <span>
+          {icon}
+          {wrappedChildren}
+        </span>
+      );
+
+    case 'right':
+      return (
+        <span>
+          {wrappedChildren}
+          {icon}
+        </span>
+      );
+  }
 };
 
 const getOnClick = props => (
@@ -82,13 +106,14 @@ const KuiButton = props => {
 };
 
 KuiButton.propTypes = {
-  icon: PropTypes.node,
-  isIconOnRight: PropTypes.bool,
-  children: PropTypes.node,
-  isLoading: PropTypes.bool,
+  ...nonVoidPropTypes,
   ...commonPropTypes,
 };
 
+KuiButton.defaultProps = {
+  ...nonVoidDefaultProps,
+};
+
 const KuiLinkButton = props => {
   const icon = getIcon(props);
   const children = getChildren(props, icon);
@@ -108,13 +133,14 @@ const KuiLinkButton = props => {
 KuiLinkButton.propTypes = {
   href: PropTypes.string,
   target: PropTypes.string,
-  icon: PropTypes.node,
-  isIconOnRight: PropTypes.bool,
-  children: PropTypes.node,
-  isLoading: PropTypes.bool,
+  ...nonVoidPropTypes,
   ...commonPropTypes,
 };
 
+KuiLinkButton.defaultProps = {
+  ...nonVoidDefaultProps,
+};
+
 const KuiSubmitButton = props => {
   const commonProps = getCommonProps(props);
 
@@ -132,13 +158,6 @@ KuiSubmitButton.propTypes = {
   ...commonPropTypes,
 };
 
-KuiButton.TYPE = KuiSubmitButton.TYPE = KuiLinkButton.TYPE = keyMirror({
-  BASIC: null,
-  HOLLOW: null,
-  DANGER: null,
-  PRIMARY: null,
-});
-
 export {
   KuiButton,
   KuiLinkButton,
diff --git a/ui_framework/components/button/button.test.js b/ui_framework/components/button/button.test.js
index 252c8942e6a75..09520a1e40513 100644
--- a/ui_framework/components/button/button.test.js
+++ b/ui_framework/components/button/button.test.js
@@ -26,7 +26,7 @@ describe('KuiButton', () => {
       describe('basic', () => {
         test('renders the basic class', () => {
           const $button = render(
-            <KuiButton type={KuiButton.TYPE.BASIC} />
+            <KuiButton type="basic" />
           );
 
           expect($button)
@@ -37,7 +37,7 @@ describe('KuiButton', () => {
       describe('hollow', () => {
         test('renders the hollow class', () => {
           const $button = render(
-            <KuiButton type={KuiButton.TYPE.HOLLOW} />
+            <KuiButton type="hollow" />
           );
 
           expect($button)
@@ -48,7 +48,7 @@ describe('KuiButton', () => {
       describe('danger', () => {
         test('renders the danger class', () => {
           const $button = render(
-            <KuiButton type={KuiButton.TYPE.DANGER} />
+            <KuiButton type="danger" />
           );
 
           expect($button)
@@ -59,7 +59,7 @@ describe('KuiButton', () => {
       describe('primary', () => {
         test('renders the primary class', () => {
           const $button = render(
-            <KuiButton type={KuiButton.TYPE.PRIMARY} />
+            <KuiButton type="primary" />
           );
 
           expect($button)
@@ -101,10 +101,13 @@ describe('KuiButton', () => {
       });
     });
 
-    describe('isIconOnRight', () => {
+    describe('iconPosition', () => {
       test('moves the icon to the right', () => {
         const $button = shallow(
-          <KuiButton icon="Icon" isIconOnRight>
+          <KuiButton
+            icon="Icon"
+            iconPosition="right"
+          >
             Hello
           </KuiButton>
         );
diff --git a/ui_framework/components/button/button_icon/button_icon.js b/ui_framework/components/button/button_icon/button_icon.js
index f210adcedd7d6..376fe664069dd 100644
--- a/ui_framework/components/button/button_icon/button_icon.js
+++ b/ui_framework/components/button/button_icon/button_icon.js
@@ -7,15 +7,15 @@ import keyMirror from 'keymirror';
 
 const KuiButtonIcon = props => {
   const typeToClassNameMap = {
-    [KuiButtonIcon.TYPE.CREATE]: 'fa-plus',
-    [KuiButtonIcon.TYPE.DELETE]: 'fa-trash',
-    [KuiButtonIcon.TYPE.PREVIOUS]: 'fa-chevron-left',
-    [KuiButtonIcon.TYPE.NEXT]: 'fa-chevron-right',
-    [KuiButtonIcon.TYPE.LOADING]: 'fa-spinner fa-spin',
+    create: 'fa-plus',
+    delete: 'fa-trash',
+    previous: 'fa-chevron-left',
+    next: 'fa-chevron-right',
+    loading: 'fa-spinner fa-spin',
   };
 
   const iconClasses = classNames('kuiButton__icon kuiIcon', props.className, {
-    [typeToClassNameMap[KuiButtonIcon.TYPE[props.type]]]: props.type,
+    [typeToClassNameMap[props.type]]: props.type,
   });
 
   return (
@@ -23,16 +23,14 @@ const KuiButtonIcon = props => {
   );
 };
 
-KuiButtonIcon.TYPE = keyMirror({
-  CREATE: null,
-  DELETE: null,
-  PREVIOUS: null,
-  NEXT: null,
-  LOADING: null,
-});
-
 KuiButtonIcon.propTypes = {
-  type: PropTypes.string,
+  type: PropTypes.oneOf([
+    'create',
+    'delete',
+    'previous',
+    'next',
+    'loading',
+  ]),
   className: PropTypes.string,
 };
 
diff --git a/ui_framework/components/button/button_icon/button_icon.test.js b/ui_framework/components/button/button_icon/button_icon.test.js
index 5887c58112f01..c3a0c3174b805 100644
--- a/ui_framework/components/button/button_icon/button_icon.test.js
+++ b/ui_framework/components/button/button_icon/button_icon.test.js
@@ -26,7 +26,7 @@ describe('KuiButtonIcon', () => {
       describe('create', () => {
         test('renders the create class', () => {
           const $buttonIcon = render(
-            <KuiButtonIcon type={KuiButtonIcon.TYPE.CREATE} />
+            <KuiButtonIcon type="create" />
           );
 
           expect($buttonIcon)
@@ -37,7 +37,7 @@ describe('KuiButtonIcon', () => {
       describe('delete', () => {
         test('renders the delete class', () => {
           const $buttonIcon = render(
-            <KuiButtonIcon type={KuiButtonIcon.TYPE.DELETE} />
+            <KuiButtonIcon type="delete" />
           );
 
           expect($buttonIcon)
@@ -48,7 +48,7 @@ describe('KuiButtonIcon', () => {
       describe('previous', () => {
         test('renders the previous class', () => {
           const $buttonIcon = render(
-            <KuiButtonIcon type={KuiButtonIcon.TYPE.PREVIOUS} />
+            <KuiButtonIcon type="previous" />
           );
 
           expect($buttonIcon)
@@ -59,7 +59,7 @@ describe('KuiButtonIcon', () => {
       describe('next', () => {
         test('renders the next class', () => {
           const $buttonIcon = render(
-            <KuiButtonIcon type={KuiButtonIcon.TYPE.NEXT} />
+            <KuiButtonIcon type="next" />
           );
 
           expect($buttonIcon)
@@ -70,7 +70,7 @@ describe('KuiButtonIcon', () => {
       describe('loading', () => {
         test('renders the loading class', () => {
           const $buttonIcon = render(
-            <KuiButtonIcon type={KuiButtonIcon.TYPE.LOADING} />
+            <KuiButtonIcon type="loading" />
           );
 
           expect($buttonIcon)
diff --git a/ui_framework/components/button/link_button.test.js b/ui_framework/components/button/link_button.test.js
index 6a645962577e1..44c1764e7e47e 100644
--- a/ui_framework/components/button/link_button.test.js
+++ b/ui_framework/components/button/link_button.test.js
@@ -26,7 +26,7 @@ describe('KuiLinkButton', () => {
       describe('basic', () => {
         test('renders the basic class', () => {
           const $button = render(
-            <KuiLinkButton type={KuiLinkButton.TYPE.BASIC} />
+            <KuiLinkButton type="basic" />
           );
 
           expect($button)
@@ -37,7 +37,7 @@ describe('KuiLinkButton', () => {
       describe('hollow', () => {
         test('renders the hollow class', () => {
           const $button = render(
-            <KuiLinkButton type={KuiLinkButton.TYPE.HOLLOW} />
+            <KuiLinkButton type="hollow" />
           );
 
           expect($button)
@@ -48,7 +48,7 @@ describe('KuiLinkButton', () => {
       describe('danger', () => {
         test('renders the danger class', () => {
           const $button = render(
-            <KuiLinkButton type={KuiLinkButton.TYPE.DANGER} />
+            <KuiLinkButton type="danger" />
           );
 
           expect($button)
@@ -59,7 +59,7 @@ describe('KuiLinkButton', () => {
       describe('primary', () => {
         test('renders the primary class', () => {
           const $button = render(
-            <KuiLinkButton type={KuiLinkButton.TYPE.PRIMARY} />
+            <KuiLinkButton type="primary" />
           );
 
           expect($button)
@@ -101,10 +101,13 @@ describe('KuiLinkButton', () => {
       });
     });
 
-    describe('isIconOnRight', () => {
+    describe('iconPosition', () => {
       test('moves the icon to the right', () => {
         const $button = shallow(
-          <KuiLinkButton icon="Icon" isIconOnRight>
+          <KuiLinkButton
+            icon="Icon"
+            iconPosition="right"
+          >
             Hello
           </KuiLinkButton>
         );
diff --git a/ui_framework/components/button/submit_button.test.js b/ui_framework/components/button/submit_button.test.js
index 58c7c82052410..4de1dfffdb3e3 100644
--- a/ui_framework/components/button/submit_button.test.js
+++ b/ui_framework/components/button/submit_button.test.js
@@ -26,7 +26,7 @@ describe('KuiSubmitButton', () => {
       describe('basic', () => {
         test('renders the basic class', () => {
           const $button = render(
-            <KuiSubmitButton type={KuiSubmitButton.TYPE.BASIC} />
+            <KuiSubmitButton type="basic" />
           );
 
           expect($button)
@@ -37,7 +37,7 @@ describe('KuiSubmitButton', () => {
       describe('hollow', () => {
         test('renders the hollow class', () => {
           const $button = render(
-            <KuiSubmitButton type={KuiSubmitButton.TYPE.HOLLOW} />
+            <KuiSubmitButton type="hollow" />
           );
 
           expect($button)
@@ -48,7 +48,7 @@ describe('KuiSubmitButton', () => {
       describe('danger', () => {
         test('renders the danger class', () => {
           const $button = render(
-            <KuiSubmitButton type={KuiSubmitButton.TYPE.DANGER} />
+            <KuiSubmitButton type="danger" />
           );
 
           expect($button)
@@ -59,7 +59,7 @@ describe('KuiSubmitButton', () => {
       describe('primary', () => {
         test('renders the primary class', () => {
           const $button = render(
-            <KuiSubmitButton type={KuiSubmitButton.TYPE.PRIMARY} />
+            <KuiSubmitButton type="primary" />
           );
 
           expect($button)
diff --git a/ui_framework/doc_site/src/views/button/button_basic.js b/ui_framework/doc_site/src/views/button/button_basic.js
index 948c3b806f9c7..de9c8ac3f7bc5 100644
--- a/ui_framework/doc_site/src/views/button/button_basic.js
+++ b/ui_framework/doc_site/src/views/button/button_basic.js
@@ -7,7 +7,7 @@ import {
 export default () => (
   <div>
     <KuiButton
-      type={KuiButton.TYPE.BASIC}
+      type="basic"
       onClick={() => window.alert('Button clicked')}
     >
       Basic button
@@ -16,7 +16,7 @@ export default () => (
     <br />
 
     <KuiButton
-      type={KuiButton.TYPE.BASIC}
+      type="basic"
       isDisabled
     >
       Basic button, disabled
diff --git a/ui_framework/doc_site/src/views/button/button_danger.js b/ui_framework/doc_site/src/views/button/button_danger.js
index 4c96bc23cea6f..e6c9fc17cd123 100644
--- a/ui_framework/doc_site/src/views/button/button_danger.js
+++ b/ui_framework/doc_site/src/views/button/button_danger.js
@@ -6,14 +6,14 @@ import {
 
 export default () => (
   <div>
-    <KuiButton type={KuiButton.TYPE.DANGER}>
+    <KuiButton type="danger">
       Danger button
     </KuiButton>
 
     <br />
 
     <KuiButton
-      type={KuiButton.TYPE.DANGER}
+      type="danger"
       isDisabled
     >
       Danger button, disabled
diff --git a/ui_framework/doc_site/src/views/button/button_elements.js b/ui_framework/doc_site/src/views/button/button_elements.js
index 7eaad1ab41188..4470a5790e308 100644
--- a/ui_framework/doc_site/src/views/button/button_elements.js
+++ b/ui_framework/doc_site/src/views/button/button_elements.js
@@ -8,7 +8,7 @@ import {
 
 export default () => (
   <div>
-    <KuiButton type={KuiButton.TYPE.BASIC}>
+    <KuiButton type="basic">
       Button element
     </KuiButton>
 
@@ -18,7 +18,7 @@ export default () => (
       e.preventDefault();
       window.alert('Submit');
     }}>
-      <KuiSubmitButton type={KuiSubmitButton.TYPE.BASIC}>
+      <KuiSubmitButton type="basic">
         Submit input element
       </KuiSubmitButton>
     </form>
@@ -26,7 +26,7 @@ export default () => (
     &nbsp;
 
     <KuiLinkButton
-      type={KuiLinkButton.TYPE.BASIC}
+      type="basic"
       href="http://www.google.com"
       target="_blank"
     >
diff --git a/ui_framework/doc_site/src/views/button/button_group.js b/ui_framework/doc_site/src/views/button/button_group.js
index fb21142da88f1..36bf80bc7e292 100644
--- a/ui_framework/doc_site/src/views/button/button_group.js
+++ b/ui_framework/doc_site/src/views/button/button_group.js
@@ -8,15 +8,15 @@ import {
 export default () => (
   <div>
     <KuiButtonGroup>
-      <KuiButton type={KuiButton.TYPE.BASIC}>
+      <KuiButton type="basic">
         Cancel
       </KuiButton>
 
-      <KuiButton type={KuiButton.TYPE.BASIC}>
+      <KuiButton type="basic">
         Duplicate
       </KuiButton>
 
-      <KuiButton type={KuiButton.TYPE.PRIMARY}>
+      <KuiButton type="primary">
         Save
       </KuiButton>
     </KuiButtonGroup>
@@ -24,7 +24,7 @@ export default () => (
     <br />
 
     <KuiButtonGroup>
-      <KuiButton type={KuiButton.TYPE.BASIC}>
+      <KuiButton type="basic">
         Button group with one button
       </KuiButton>
     </KuiButtonGroup>
diff --git a/ui_framework/doc_site/src/views/button/button_group_united.js b/ui_framework/doc_site/src/views/button/button_group_united.js
index 84c041055d599..af05596ae636f 100644
--- a/ui_framework/doc_site/src/views/button/button_group_united.js
+++ b/ui_framework/doc_site/src/views/button/button_group_united.js
@@ -9,15 +9,15 @@ import {
 export default () => (
   <div>
     <KuiButtonGroup isUnited>
-      <KuiButton type={KuiButton.TYPE.BASIC}>
+      <KuiButton type="basic">
         Option A
       </KuiButton>
 
-      <KuiButton type={KuiButton.TYPE.BASIC}>
+      <KuiButton type="basic">
         Option B
       </KuiButton>
 
-      <KuiButton type={KuiButton.TYPE.BASIC}>
+      <KuiButton type="basic">
         Option C
       </KuiButton>
     </KuiButtonGroup>
@@ -26,13 +26,13 @@ export default () => (
 
     <KuiButtonGroup isUnited>
       <KuiButton
-        type={KuiButton.TYPE.BASIC}
-        icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.PREVIOUS} />}
+        type="basic"
+        icon={<KuiButtonIcon type="previous" />}
       />
 
       <KuiButton
-        type={KuiButton.TYPE.BASIC}
-        icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.NEXT} />}
+        type="basic"
+        icon={<KuiButtonIcon type="next" />}
       />
     </KuiButtonGroup>
   </div>
diff --git a/ui_framework/doc_site/src/views/button/button_hollow.js b/ui_framework/doc_site/src/views/button/button_hollow.js
index d78100ce906bb..8780b4eac789c 100644
--- a/ui_framework/doc_site/src/views/button/button_hollow.js
+++ b/ui_framework/doc_site/src/views/button/button_hollow.js
@@ -6,14 +6,14 @@ import {
 
 export default () => (
   <div>
-    <KuiButton type={KuiButton.TYPE.HOLLOW}>
+    <KuiButton type="hollow">
       Hollow button
     </KuiButton>
 
     <br />
 
     <KuiButton
-      type={KuiButton.TYPE.HOLLOW}
+      type="hollow"
       isDisabled
     >
       Hollow button, disabled
diff --git a/ui_framework/doc_site/src/views/button/button_loading.js b/ui_framework/doc_site/src/views/button/button_loading.js
index f40b045a65714..f27b1d7f8631e 100644
--- a/ui_framework/doc_site/src/views/button/button_loading.js
+++ b/ui_framework/doc_site/src/views/button/button_loading.js
@@ -34,7 +34,7 @@ export default class LoadingButton extends Component {
     return (
       <div>
         <KuiButton
-          type={KuiButton.TYPE.BASIC}
+          type="basic"
           onClick={this.onClick}
           isLoading={this.state.isLoading}
           isDisabled={this.state.isLoading}
@@ -45,9 +45,9 @@ export default class LoadingButton extends Component {
         <br />
 
         <KuiButton
-          type={KuiButton.TYPE.PRIMARY}
+          type="primary"
           onClick={this.onClick}
-          icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.CREATE} />}
+          icon={<KuiButtonIcon type="create" />}
           isLoading={this.state.isLoading}
           isDisabled={this.state.isLoading}
         >
diff --git a/ui_framework/doc_site/src/views/button/button_primary.js b/ui_framework/doc_site/src/views/button/button_primary.js
index 0ab7584a9f046..3b7b0bc894c50 100644
--- a/ui_framework/doc_site/src/views/button/button_primary.js
+++ b/ui_framework/doc_site/src/views/button/button_primary.js
@@ -6,14 +6,14 @@ import {
 
 export default () => (
   <div>
-    <KuiButton type={KuiButton.TYPE.PRIMARY}>
+    <KuiButton type="primary">
       Primary button
     </KuiButton>
 
     <br />
 
     <KuiButton
-      type={KuiButton.TYPE.PRIMARY}
+      type="primary"
       isDisabled
     >
       Primary button, disabled
diff --git a/ui_framework/doc_site/src/views/button/button_with_icon.js b/ui_framework/doc_site/src/views/button/button_with_icon.js
index 847b6ddc1e85e..1039953f73c15 100644
--- a/ui_framework/doc_site/src/views/button/button_with_icon.js
+++ b/ui_framework/doc_site/src/views/button/button_with_icon.js
@@ -8,8 +8,8 @@ import {
 export default () => (
   <div>
     <KuiButton
-      type={KuiButton.TYPE.PRIMARY}
-      icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.CREATE} />}
+      type="primary"
+      icon={<KuiButtonIcon type="create" />}
     >
       Create
     </KuiButton>
@@ -17,8 +17,8 @@ export default () => (
     <br />
 
     <KuiButton
-      type={KuiButton.TYPE.DANGER}
-      icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.DELETE} />}
+      type="danger"
+      icon={<KuiButtonIcon type="delete" />}
     >
       Delete
     </KuiButton>
@@ -26,8 +26,8 @@ export default () => (
     <br />
 
     <KuiButton
-      type={KuiButton.TYPE.BASIC}
-      icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.PREVIOUS} />}
+      type="basic"
+      icon={<KuiButtonIcon type="previous" />}
     >
       Previous
     </KuiButton>
@@ -35,9 +35,9 @@ export default () => (
     <br />
 
     <KuiButton
-      type={KuiButton.TYPE.BASIC}
-      icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.NEXT} />}
-      isIconOnRight
+      type="basic"
+      icon={<KuiButtonIcon type="next" />}
+      iconPosition='right'
     >
       Next
     </KuiButton>
@@ -45,8 +45,8 @@ export default () => (
     <br />
 
     <KuiButton
-      type={KuiButton.TYPE.BASIC}
-      icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.LOADING} />}
+      type="basic"
+      icon={<KuiButtonIcon type="loading" />}
     >
       Loading
     </KuiButton>
@@ -54,7 +54,7 @@ export default () => (
     <br />
 
     <KuiButton
-      type={KuiButton.TYPE.BASIC}
+      type="basic"
       icon={<KuiButtonIcon className="fa-plane" />}
     />
   </div>
diff --git a/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js b/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js
index 5ea2a2c834786..66c8cf599e582 100644
--- a/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js
+++ b/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js
@@ -6,34 +6,34 @@ import {
 
 export default () => (
   <div className="kuiToolBar">
-    <KuiButton type={KuiButton.TYPE.BASIC}>
+    <KuiButton type="basic">
       Basic button
     </KuiButton>
 
     <KuiButton
-      type={KuiButton.TYPE.BASIC}
+      type="basic"
       isDisabled
     >
       Basic button, disabled
     </KuiButton>
 
-    <KuiButton type={KuiButton.TYPE.PRIMARY}>
+    <KuiButton type="primary">
       Primary button
     </KuiButton>
 
     <KuiButton
-      type={KuiButton.TYPE.PRIMARY}
+      type="primary"
       isDisabled
     >
       Primary button, disabled
     </KuiButton>
 
-    <KuiButton type={KuiButton.TYPE.DANGER}>
+    <KuiButton type="danger">
       Danger button
     </KuiButton>
 
     <KuiButton
-      type={KuiButton.TYPE.DANGER}
+      type="danger"
       isDisabled
     >
       Danger button, disabled