diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 534e851c60..a4d04aac07 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -6477,7 +6477,7 @@ exports[`Storyshots Components/Hr Base 1`] = `
 }
 
 <hr
-  class="circuit-0 circuit-1"
+  class="circuit-0"
 />
 `;
 
diff --git a/src/components/Hr/Hr.docs.mdx b/src/components/Hr/Hr.docs.mdx
index b42ac6abd8..ae805977b3 100644
--- a/src/components/Hr/Hr.docs.mdx
+++ b/src/components/Hr/Hr.docs.mdx
@@ -1,5 +1,5 @@
 import { Status, Props, Story } from '../../../.storybook/components';
-import Hr from '../../../src/components/Hr/Hr';
+import { Hr } from './Hr';
 
 # HR
 
@@ -8,13 +8,11 @@ import Hr from '../../../src/components/Hr/Hr';
 HR provides a visual line that separates content into sections
 
 <Story id="components-hr--base" />
-
 <Props of={Hr} />
 
 ## When to use it
 
-Use it when you need to separate different sections of a certain content within a body text or a list
-of data within a card.
+Use it when you need to separate different sections of a certain content within a body text or a list of data within a card.
 
 ## Usage guidelines
 
diff --git a/src/components/Hr/Hr.spec.js b/src/components/Hr/Hr.spec.tsx
similarity index 91%
rename from src/components/Hr/Hr.spec.js
rename to src/components/Hr/Hr.spec.tsx
index edf12e319f..a66f87a509 100644
--- a/src/components/Hr/Hr.spec.js
+++ b/src/components/Hr/Hr.spec.tsx
@@ -15,7 +15,9 @@
 
 import React from 'react';
 
-import Hr from './Hr';
+import { create, renderToHtml, axe } from '../../util/test-utils';
+
+import { Hr } from './Hr';
 
 describe('Hr', () => {
   /**
diff --git a/src/components/Hr/Hr.story.js b/src/components/Hr/Hr.story.tsx
similarity index 96%
rename from src/components/Hr/Hr.story.js
rename to src/components/Hr/Hr.story.tsx
index add32b4bec..833fc7f0a9 100644
--- a/src/components/Hr/Hr.story.js
+++ b/src/components/Hr/Hr.story.tsx
@@ -16,7 +16,7 @@
 import React from 'react';
 
 import docs from './Hr.docs.mdx';
-import Hr from './Hr';
+import { Hr } from './Hr';
 
 export default {
   title: 'Components/Hr',
diff --git a/src/components/Hr/Hr.js b/src/components/Hr/Hr.tsx
similarity index 84%
rename from src/components/Hr/Hr.js
rename to src/components/Hr/Hr.tsx
index 3caf371277..d2f7abab02 100644
--- a/src/components/Hr/Hr.js
+++ b/src/components/Hr/Hr.tsx
@@ -13,10 +13,11 @@
  * limitations under the License.
  */
 
-import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
-const baseStyles = ({ theme }) => css`
+import styled, { StyleProps } from '../../styles/styled';
+
+const baseStyles = ({ theme }: StyleProps) => css`
   label: hr;
   display: block;
   width: 100%;
@@ -28,9 +29,4 @@ const baseStyles = ({ theme }) => css`
 /**
  * A horizontal rule to visually and semantically separate text.
  */
-const Hr = styled('hr')(baseStyles);
-
-/**
- * @component
- */
-export default Hr;
+export const Hr = styled('hr')<{}>(baseStyles);
diff --git a/src/components/Hr/__snapshots__/Hr.spec.js.snap b/src/components/Hr/__snapshots__/Hr.spec.tsx.snap
similarity index 88%
rename from src/components/Hr/__snapshots__/Hr.spec.js.snap
rename to src/components/Hr/__snapshots__/Hr.spec.tsx.snap
index 915e4ff616..d1423f11ed 100644
--- a/src/components/Hr/__snapshots__/Hr.spec.js.snap
+++ b/src/components/Hr/__snapshots__/Hr.spec.tsx.snap
@@ -10,6 +10,6 @@ exports[`Hr should render with default styles 1`] = `
 }
 
 <hr
-  class="circuit-0 circuit-1"
+  class="circuit-0"
 />
 `;
diff --git a/src/components/Hr/index.js b/src/components/Hr/index.ts
similarity index 95%
rename from src/components/Hr/index.js
rename to src/components/Hr/index.ts
index 9cbbdc9e2e..fee37fc1c0 100644
--- a/src/components/Hr/index.js
+++ b/src/components/Hr/index.ts
@@ -13,6 +13,6 @@
  * limitations under the License.
  */
 
-import Hr from './Hr';
+import { Hr } from './Hr';
 
 export default Hr;