diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule.js b/src-docs/src/views/horizontal_rule/horizontal_rule.tsx
similarity index 79%
rename from src-docs/src/views/horizontal_rule/horizontal_rule.js
rename to src-docs/src/views/horizontal_rule/horizontal_rule.tsx
index da02122e22c..7abca3742ac 100644
--- a/src-docs/src/views/horizontal_rule/horizontal_rule.js
+++ b/src-docs/src/views/horizontal_rule/horizontal_rule.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   EuiHorizontalRule,
-} from '../../../../src/components';
+} from '../../../../src/components/horizontal_rule';
 
 export default () => (
   <div>
diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.tsx
similarity index 88%
rename from src-docs/src/views/horizontal_rule/horizontal_rule_margin.js
rename to src-docs/src/views/horizontal_rule/horizontal_rule_margin.tsx
index bf0c750fbe1..0e2c10fe0cf 100644
--- a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js
+++ b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   EuiHorizontalRule,
-} from '../../../../src/components';
+} from '../../../../src/components/horizontal_rule';
 
 export default () => (
   <div>
diff --git a/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.js.snap b/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap
similarity index 100%
rename from src/components/horizontal_rule/__snapshots__/horizontal_rule.test.js.snap
rename to src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap
diff --git a/src/components/horizontal_rule/horizontal_rule.test.js b/src/components/horizontal_rule/horizontal_rule.test.tsx
similarity index 100%
rename from src/components/horizontal_rule/horizontal_rule.test.js
rename to src/components/horizontal_rule/horizontal_rule.test.tsx
diff --git a/src/components/horizontal_rule/horizontal_rule.js b/src/components/horizontal_rule/horizontal_rule.tsx
similarity index 58%
rename from src/components/horizontal_rule/horizontal_rule.js
rename to src/components/horizontal_rule/horizontal_rule.tsx
index 9ce7cc6a128..c30291ae2ce 100644
--- a/src/components/horizontal_rule/horizontal_rule.js
+++ b/src/components/horizontal_rule/horizontal_rule.tsx
@@ -1,7 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { SFC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
+
+export type EuiHorizontalRuleSize = keyof typeof sizeToClassNameMap;
+export type EuiHorizontalRuleMargin = keyof typeof marginToClassNameMap;
+
+export interface EuiHorizontalRuleProps {
+  /**
+   * Defines the width of the HR.
+   */
+  size?: EuiHorizontalRuleSize;
+  margin?: EuiHorizontalRuleMargin;
+}
+
 const sizeToClassNameMap = {
   full: 'euiHorizontalRule--full',
   half: 'euiHorizontalRule--half',
@@ -22,7 +34,9 @@ const marginToClassNameMap = {
 
 export const MARGINS = Object.keys(marginToClassNameMap);
 
-export const EuiHorizontalRule = ({
+export const EuiHorizontalRule: SFC<
+CommonProps & HTMLAttributes<HTMLHRElement> & EuiHorizontalRuleProps
+> = ({
   className,
   size,
   margin,
@@ -30,8 +44,8 @@ export const EuiHorizontalRule = ({
 }) => {
   const classes = classNames(
     'euiHorizontalRule',
-    sizeToClassNameMap[size],
-    marginToClassNameMap[margin],
+    size ? sizeToClassNameMap[size] : undefined,
+    margin ? marginToClassNameMap[margin] : undefined,
     className
   );
 
@@ -43,13 +57,6 @@ export const EuiHorizontalRule = ({
   );
 };
 
-EuiHorizontalRule.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  size: PropTypes.oneOf(SIZES),
-  margin: PropTypes.oneOf(MARGINS),
-};
-
 EuiHorizontalRule.defaultProps = {
   size: 'full',
   margin: 'l',
diff --git a/src/components/horizontal_rule/index.d.ts b/src/components/horizontal_rule/index.d.ts
deleted file mode 100644
index 0fd64f890dd..00000000000
--- a/src/components/horizontal_rule/index.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { CommonProps } from '../common';
-
-import { SFC, HTMLAttributes } from 'react';
-
-declare module '@elastic/eui' {
-
-  /**
-   * EuiHorizontalRule type defs
-   *
-   * @see './horizontal_rule.js'
-   */
-
-  export type EuiHorizontalRuleSize = 'full' | 'half' | 'quarter';
-
-  export type EuiHorizontalRuleMargin = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
-
-  export interface EuiHorizontalRuleProps {
-    size?: EuiHorizontalRuleSize;
-    margin?: EuiHorizontalRuleMargin;
-  }
-
-  export const EuiHorizontalRule: SFC<
-    CommonProps & HTMLAttributes<HTMLHRElement> & EuiHorizontalRuleProps
-    >;
-
-}
diff --git a/src/components/horizontal_rule/index.js b/src/components/horizontal_rule/index.ts
similarity index 100%
rename from src/components/horizontal_rule/index.js
rename to src/components/horizontal_rule/index.ts
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index cd4307f58f2..05fa53360e0 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -14,7 +14,6 @@
 /// <reference path="./flyout/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
 /// <reference path="./health/index.d.ts" />
-/// <reference path="./horizontal_rule/index.d.ts" />
 /// <reference path="./icon/index.d.ts" />
 /// <reference path="./key_pad_menu/index.d.ts" />
 /// <reference path="./link/index.d.ts" />