diff --git a/src/Divider/Divider.story.tsx b/src/Divider/Divider.story.tsx
index a5b3af99c..04b897eea 100644
--- a/src/Divider/Divider.story.tsx
+++ b/src/Divider/Divider.story.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import { Divider } from ".";
import { Text } from "../Type";
+import { Divider } from ".";
export default {
title: "Components/Divider",
@@ -15,6 +15,14 @@ export const Default = () => (
);
+export const Secondary = () => (
+
+
Section A
+
+
Section B
+
+);
+
export const WithCustomColourAndSpacing = () => (
Section A
@@ -29,7 +37,7 @@ export const WithCustomProperties = () => (
Section B
diff --git a/src/Divider/Divider.tsx b/src/Divider/Divider.tsx
index 15e16fa09..22ce0163f 100644
--- a/src/Divider/Divider.tsx
+++ b/src/Divider/Divider.tsx
@@ -1,17 +1,19 @@
import styled from "styled-components";
import { addStyledProps, StyledProps } from "../StyledProps";
-type Props = StyledProps;
+export interface DividerProps extends StyledProps, React.HTMLAttributes {
+ secondary?: boolean;
+}
-const Divider = styled.div(
- ({ theme, color }) => ({
- display: "flex",
+const Divider = styled.hr(
+ ({ theme, color, secondary }) => ({
+ border: "none",
+ borderTopWidth: "1px",
+ borderTopStyle: "solid",
+ width: "100%",
marginTop: theme.space.x2,
marginBottom: theme.space.x2,
- marginLeft: "0",
- marginRight: "0",
- borderBottom: "1px solid",
- borderColor: color ? color : theme.colors.lightGrey,
+ borderColor: color || (secondary ? theme.colors.whiteGrey : theme.colors.lightGrey),
}),
addStyledProps
);