diff --git a/common/changes/office-ui-fabric-react/split-button-divider_2017-09-08-00-37.json b/common/changes/office-ui-fabric-react/split-button-divider_2017-09-08-00-37.json
new file mode 100644
index 0000000000000..bc638fca7b354
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/split-button-divider_2017-09-08-00-37.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Button: Add support for dividers in split buttons",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "christianjordangonzalez@gmail.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 8e0cd4a9d9395..dcdc77f75dbe5 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -17,7 +17,7 @@ import { DirectionalHint } from '../../common/DirectionalHint';
 import { ContextualMenu, IContextualMenuProps } from '../../ContextualMenu';
 import { IButtonProps, IButton } from './Button.Props';
 import { IButtonClassNames, getClassNames } from './BaseButton.classNames';
-import { getClassNames as getSplitButtonClassNames } from './SplitButton/SplitButton.classNames';
+import { getClassNames as getSplitButtonClassNames, ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';
 
 export interface IBaseButtonProps extends IButtonProps {
   baseClassName?: string;
@@ -360,9 +360,12 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   private _onRenderSplitButtonContent(tag: any, buttonProps: IButtonProps): JSX.Element {
     const {
       styles,
-      disabled
+      disabled,
+      checked
     } = this.props;
 
+    const classNames = styles && getSplitButtonClassNames(styles!, !!disabled, !!this.state.menuProps, !!checked);
+
     return (
       <div
         aria-labelledby={ buttonProps.ariaLabel }
@@ -376,21 +379,27 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         onKeyDown={ this.props.disabled ? undefined : this._onSplitButtonKeyDown }
         ref={ this._resolveRef('_splitButtonContainer') }
       >
+
         <span aria-hidden={ true } style={ { 'display': 'flex' } }>
           { this._onRenderContent(tag, buttonProps) }
-          { this._onRenderSplitButtonMenuButton() }
+          { this._onRenderSplitButtonDivider(classNames) }
+          { this._onRenderSplitButtonMenuButton(classNames) }
         </span>
       </div >
     );
   }
 
-  private _onRenderSplitButtonMenuButton(): JSX.Element {
+  private _onRenderSplitButtonDivider(classNames: ISplitButtonClassNames | undefined): JSX.Element | null {
+    if (classNames && classNames.divider) {
+      return <span className={ classNames.divider } />;
+    }
+    return null;
+  }
+
+  private _onRenderSplitButtonMenuButton(classNames: ISplitButtonClassNames | undefined): JSX.Element {
     let {
       menuIconName,
-      menuIconProps,
-      styles,
-      disabled,
-      checked
+      menuIconProps
     } = this.props;
 
     if (menuIconProps === undefined) {
@@ -399,8 +408,6 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       };
     }
 
-    const classNames = styles ? getSplitButtonClassNames(styles!, disabled || false, !!this.state.menuProps, checked || false) : undefined;
-
     return (
       <BaseButton
         tabIndex={ -1 }
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts b/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts
index 447230fb9eb01..65dde1ca39a4e 100644
--- a/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts
@@ -363,6 +363,12 @@ export interface IButtonStyles {
    */
   splitButtonContainerDisabled?: IStyle;
 
+  /**
+   * Style override for the divider element that appears between the button and menu button
+   * for a split button.
+   */
+  splitButtonDivider?: IStyle;
+
   /**
    * Style override for the SplitButton menu button
    */
diff --git a/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.classNames.ts b/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.classNames.ts
index 3d552ebe1b130..87e1d8f70e05d 100644
--- a/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.classNames.ts
@@ -6,6 +6,7 @@ export interface ISplitButtonClassNames {
   root?: string;
   icon?: string;
   flexContainer?: string;
+  divider?: string;
 }
 
 export const getClassNames = memoizeFunction((
@@ -28,6 +29,7 @@ export const getClassNames = memoizeFunction((
       ]
     ) as string,
     icon: (disabled ? mergeStyles(styles.splitButtonMenuIcon, styles.splitButtonMenuIconDisabled) : styles.splitButtonMenuIcon) as string,
-    flexContainer: styles.splitButtonFlexContainer as string
+    flexContainer: styles.splitButtonFlexContainer as string,
+    divider: styles.splitButtonDivider as string
   };
 });
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.styles.ts
new file mode 100644
index 0000000000000..3ecab1824cced
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.styles.ts
@@ -0,0 +1,10 @@
+import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
+import { IButtonStyles } from 'office-ui-fabric-react/lib/Button';
+
+export const getCustomSplitButtonStyles = memoizeFunction((): IButtonStyles => {
+  return {
+    splitButtonMenuButton: { backgroundColor: 'white', width: '10px' },
+    splitButtonMenuIcon: { fontSize: '7px' },
+    splitButtonDivider: { borderLeft: '1px solid #c8c8c8' }
+  };
+});
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
index 5c3c4a57aa8ef..4f235f9022131 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { DefaultButton, IconButton, IButtonProps, IButtonStyles } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton, IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
+import { getCustomSplitButtonStyles } from './Button.Split.Example.styles';
 
 export class ButtonSplitExample extends React.Component<IButtonProps, {}> {
   public constructor() {
@@ -47,7 +48,7 @@ export class ButtonSplitCustomExample extends React.Component<IButtonProps, {}>
 
   public render() {
     let { disabled, checked } = this.props;
-    const style: IButtonStyles = { splitButtonMenuButton: { backgroundColor: 'white', width: '10px' }, splitButtonMenuIcon: { fontSize: '7px' } };
+    const customSplitButtonStyles = getCustomSplitButtonStyles();
 
     return (
       <div>
@@ -60,7 +61,7 @@ export class ButtonSplitCustomExample extends React.Component<IButtonProps, {}>
           text='Create account'
           onClick={ () => alert('Clicked') }
           split={ true }
-          styles={ style }
+          styles={ customSplitButtonStyles }
           menuProps={ {
             items: [
               {