diff --git a/app/ButtonsWrapper.js b/app/ButtonsWrapper.js
index 0dc9a9c8..2d0f966c 100644
--- a/app/ButtonsWrapper.js
+++ b/app/ButtonsWrapper.js
@@ -7,6 +7,7 @@ import { BaseButton, Button, IconButton, IconsButton } from "../composites/Plugi
 import IconButtonToggle from "../composites/Plugin/Shared/components/IconButtonToggle";
 import { BaseLinkButton, LinkButton } from "../composites/Plugin/Shared/components/LinkButton";
 import FormButton from "../forms/Button";
+import Toggle from "../composites/Plugin/Shared/components/Toggle.js"
 import IconLabelledButton from "../composites/Plugin/Shared/components/IconLabelledButton";
 
 const ButtonsContainer = styled.div`
@@ -88,6 +89,8 @@ export default class ButtonsList extends React.Component {
 				<Separator />
 				<YoastButton>YoastButton</YoastButton>
 				<Separator />
+				<Toggle ariaLabel="Test the Toggle"/>
+				<Separator />
 				<IconLabelledButton icon="question-circle">Need help?</IconLabelledButton>
 				<IconLabelledButton	icon="gear">Settings</IconLabelledButton>
 				<IconLabelledButton
diff --git a/composites/Plugin/CornerstoneContent/components/CornerstoneToggle.js b/composites/Plugin/CornerstoneContent/components/CornerstoneToggle.js
new file mode 100644
index 00000000..3b078e86
--- /dev/null
+++ b/composites/Plugin/CornerstoneContent/components/CornerstoneToggle.js
@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import Toggle from "../../Shared/components/Toggle";
+import { __ } from "@wordpress/i18n";
+
+const Cornerstone = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 5px;
+
+	label { 
+		margin-right: 10px;
+		flex-shrink: 0;
+		max-width: 75%;
+	}
+`;
+
+class CornerstoneToggle extends React.Component {
+	/**
+	 * Renders the CornerstoneToggle component.
+	 *
+	 * @returns {ReactElement} the CornerstoneToggle component.
+	 */
+	render() {
+		return (
+			<Cornerstone>
+				<Toggle
+					id="cornerstone_toggle"
+					ariaLabel={ __( "Mark this post as cornerstone content", "yoast-components" ) }
+					labelText={ __( "Mark this as cornerstone content.", "yoast-components" ) }
+					isEnabled={ this.props.isEnabled }
+					onSetToggleState={ this.props.onToggle }
+					onToggleDisabled={ this.props.onToggleDisabled }
+				/>
+			</Cornerstone>
+		);
+	}
+}
+
+CornerstoneToggle.propTypes = {
+	isEnabled: PropTypes.bool,
+	onSetToggleState: PropTypes.func,
+	onToggle: PropTypes.func,
+	disable: PropTypes.bool,
+	onToggleDisabled: PropTypes.func,
+};
+
+export default CornerstoneToggle;
diff --git a/composites/Plugin/CornerstoneContent/tests/CornerstoneToggleTest.js b/composites/Plugin/CornerstoneContent/tests/CornerstoneToggleTest.js
new file mode 100644
index 00000000..77d5471b
--- /dev/null
+++ b/composites/Plugin/CornerstoneContent/tests/CornerstoneToggleTest.js
@@ -0,0 +1,12 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import CornerstoneToggle from "../components/CornerstoneToggle";
+
+test( "The CornerstoneToggle matches the snapshot", () => {
+	const component = renderer.create(
+		<CornerstoneToggle onChange={ () => {} } checked={ true } />
+	);
+
+	let tree = component.toJSON();
+	expect( tree ).toMatchSnapshot();
+} );
diff --git a/composites/Plugin/CornerstoneContent/tests/__snapshots__/CornerstoneToggleTest.js.snap b/composites/Plugin/CornerstoneContent/tests/__snapshots__/CornerstoneToggleTest.js.snap
new file mode 100644
index 00000000..983f2fcb
--- /dev/null
+++ b/composites/Plugin/CornerstoneContent/tests/__snapshots__/CornerstoneToggleTest.js.snap
@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The CornerstoneToggle matches the snapshot 1`] = `
+.c2 {
+  background-color: #ccc;
+  border-radius: 7px;
+  height: 14px;
+  width: 30px;
+  cursor: pointer;
+  margin: 0;
+  outline: 0;
+}
+
+.c2:focus > span {
+  box-shadow: inset 0 0 0 1px #fff,0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);
+}
+
+.c3 {
+  background-color: #888;
+  margin-left: -2px;
+  box-shadow: 0 2px 2px 2px rgba(0,0,0,0.1);
+  border-radius: 100%;
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  margin-top: -3px;
+}
+
+.c4 {
+  font-size: 14px;
+  line-height: 20px;
+  width: 30px;
+  text-align: center;
+  display: inline-block;
+  margin: 0;
+  font-style: italic;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-top: 5px;
+}
+
+.c0 label {
+  margin-right: 10px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  max-width: 75%;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <label
+      htmlFor="cornerstone_toggle"
+      onClick={[Function]}
+    >
+      Mark this as cornerstone content.
+    </label>
+    <div
+      aria-checked={false}
+      aria-label="Mark this post as cornerstone content"
+      className="c2"
+      id="cornerstone_toggle"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="checkbox"
+      tabIndex="0"
+    >
+      <span
+        className="c3"
+      />
+    </div>
+    <span
+      aria-hidden="true"
+      className="c4"
+    >
+      Off
+    </span>
+  </div>
+</div>
+`;
diff --git a/composites/Plugin/Shared/components/Button.js b/composites/Plugin/Shared/components/Button.js
index d9363eb3..8fd73257 100644
--- a/composites/Plugin/Shared/components/Button.js
+++ b/composites/Plugin/Shared/components/Button.js
@@ -153,7 +153,7 @@ export const addButtonStyles = flow( [
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled button.
+ * @returns {ReactElement} styled button.
  */
 export const BaseButton = addButtonStyles(
 	styled.button`
@@ -203,7 +203,7 @@ BaseButton.defaultProps = {
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled button.
+ * @returns {ReactElement} styled button.
  */
 export const Button = addFontSizeStyles( BaseButton );
 
@@ -226,7 +226,7 @@ function addIconTextStyle( icon ) {
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled icon button.
+ * @returns {ReactElement} styled icon button.
  */
 export const IconButton = ( props ) => {
 	const { children: text, icon, iconColor } = props;
@@ -265,7 +265,7 @@ IconButton.defaultProps = {
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled icon button.
+ * @returns {ReactElement} styled icon button.
  */
 export const IconsButton = ( props ) => {
 	const { children: text, prefixIcon, prefixIconColor, suffixIcon, suffixIconColor } = props;
diff --git a/composites/Plugin/Shared/components/HelpCenterButton.js b/composites/Plugin/Shared/components/HelpCenterButton.js
index 8f90e9ff..41268935 100644
--- a/composites/Plugin/Shared/components/HelpCenterButton.js
+++ b/composites/Plugin/Shared/components/HelpCenterButton.js
@@ -11,7 +11,7 @@ import SvgIcon from "../../Shared/components/SvgIcon";
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled icon button.
+ * @returns {ReactElement} styled icon button.
  */
 const HelpCenterButtonBase = ( props ) => {
 	return (
diff --git a/composites/Plugin/Shared/components/LinkButton.js b/composites/Plugin/Shared/components/LinkButton.js
index 8f255521..4a502e48 100644
--- a/composites/Plugin/Shared/components/LinkButton.js
+++ b/composites/Plugin/Shared/components/LinkButton.js
@@ -10,7 +10,7 @@ import { addButtonStyles, addFontSizeStyles } from "./Button";
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled button.
+ * @returns {ReactElement} styled button.
  */
 export const BaseLinkButton = addButtonStyles(
 	styled.a`
@@ -59,6 +59,6 @@ BaseLinkButton.defaultProps = {
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled link.
+ * @returns {ReactElement} styled link.
  */
 export const LinkButton = addFontSizeStyles( BaseLinkButton );
diff --git a/composites/Plugin/Shared/components/Toggle.js b/composites/Plugin/Shared/components/Toggle.js
new file mode 100644
index 00000000..2a6cce77
--- /dev/null
+++ b/composites/Plugin/Shared/components/Toggle.js
@@ -0,0 +1,135 @@
+import PropTypes from "prop-types";
+import React from "react";
+import styled from "styled-components";
+import colors from "../../../../style-guide/colors.json";
+import { __ } from "@wordpress/i18n";
+
+const ToggleBar = styled.div`
+	background-color: ${ props => props.isEnabled ? "#a5d6a7" : colors.$color_button_border };
+	border-radius: 7px;
+	height: 14px;
+	width: 30px;
+	cursor: pointer;
+	margin: 0;
+	outline: 0;
+	&:focus > span {
+		box-shadow: inset 0 0 0 1px ${colors.$color_white}, 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
+	}
+`;
+
+const ToggleBullet = styled.span`
+	background-color: ${ props => props.isEnabled ? colors.$color_green_medium_light : colors.$color_grey_medium_dark };
+	margin-left: ${ props => props.isEnabled ? "12px" : "-2px" };
+	box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
+	border-radius: 100%;
+	height: 20px;
+	width: 20px;
+	position: absolute;
+	margin-top: -3px;
+`;
+
+const ToggleVisualLabel = styled.span`
+	font-size: 14px;
+	line-height: 20px;
+	width: 30px;
+	text-align: center;
+	display: inline-block;
+	margin: 0;
+	font-style: italic;
+`;
+
+const ToggleDiv = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+`;
+
+class Toggle extends React.Component {
+	/**
+	 * Sets the toggle object.
+	 *
+	 * @param {Object} props The props to use.
+	 *
+	 * @returns {void}
+	 */
+	constructor( props ) {
+		super( props );
+
+		this.onClick = this.props.onToggleDisabled;
+
+		this.setToggleState = this.setToggleState.bind( this );
+
+		if ( props.disable !== true ) {
+			this.onClick = this.setToggleState.bind( this );
+		}
+	}
+
+	/**
+	 * Returns the rendered HTML.
+	 *
+	 * @returns {ReactElement} The rendered HTML.
+	 */
+	render() {
+		return(
+			<ToggleDiv>
+				{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */ }
+				<label
+					htmlFor={ this.props.id }
+					onClick={ this.onClick }
+				>
+					{ this.props.labelText }
+				</label>
+				<ToggleBar
+					isEnabled={ this.props.isEnabled }
+					onClick={ this.onClick }
+					onKeyDown={ this.setToggleState }
+					tabIndex="0"
+					role="checkbox"
+					aria-label={ this.props.ariaLabel }
+					aria-checked={ this.props.isEnabled }
+					id={ this.props.id }
+				>
+					<ToggleBullet isEnabled={ this.props.isEnabled } />
+				</ToggleBar>
+				<ToggleVisualLabel aria-hidden="true">
+					{ this.props.isEnabled ? __( "On", "yoast-components" ) : __( "Off", "yoast-components" ) }
+				</ToggleVisualLabel>
+			</ToggleDiv>
+		);
+	}
+
+	/**
+	 * Sets the state to the opposite of the current state.
+	 *
+	 * @param {Object} event React SyntheticEvent.
+	 *
+	 * @returns {void}
+	 */
+	setToggleState( event ) {
+		// Makes the toggle actionable with the Space bar key.
+		if ( event.type === "keydown" && event.keyCode !== 32 ) {
+			return;
+		}
+
+		this.props.onSetToggleState( ! this.props.isEnabled );
+	}
+}
+
+Toggle.propTypes = {
+	isEnabled: PropTypes.bool,
+	ariaLabel: PropTypes.string.isRequired,
+	onSetToggleState: PropTypes.func,
+	disable: PropTypes.bool,
+	onToggleDisabled: PropTypes.func,
+	id: PropTypes.string.isRequired,
+	labelText: PropTypes.string,
+};
+
+Toggle.defaultProps = {
+	isEnabled: false,
+	onSetToggleState: () => {},
+	disable: false,
+	labelText: "",
+};
+
+export default Toggle;
diff --git a/composites/Plugin/Shared/components/YoastButton.js b/composites/Plugin/Shared/components/YoastButton.js
index f72bca4c..e688cb12 100644
--- a/composites/Plugin/Shared/components/YoastButton.js
+++ b/composites/Plugin/Shared/components/YoastButton.js
@@ -107,7 +107,7 @@ YoastButtonBase.defaultProps = {
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled button.
+ * @returns {ReactElement} styled button.
  */
 export const YoastButton = addButtonStyles(
 	styled( YoastButtonBase )`
diff --git a/composites/Plugin/Shared/components/YoastLinkButton.js b/composites/Plugin/Shared/components/YoastLinkButton.js
index d1d2a58a..9308fa52 100644
--- a/composites/Plugin/Shared/components/YoastLinkButton.js
+++ b/composites/Plugin/Shared/components/YoastLinkButton.js
@@ -8,7 +8,7 @@ import { addButtonStyles } from "./YoastButton";
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled link.
+ * @returns {ReactElement} styled link.
  */
 export const YoastLinkButton = addButtonStyles(
 	styled.a`
diff --git a/composites/basic/Notification.js b/composites/basic/Notification.js
index da3f5d38..010c08ac 100644
--- a/composites/basic/Notification.js
+++ b/composites/basic/Notification.js
@@ -77,7 +77,7 @@ const StyledIcon = styled( SvgIcon )`
  *
  * @param {object} props Component props.
  *
- * @returns {ReactElement} Styled notification.
+ * @returns {ReactElement} styled notification.
  */
 function Notification( props ) {
 	const Heading = `${ props.headingLevel }`;
diff --git a/index.js b/index.js
index 96290f89..1319a862 100644
--- a/index.js
+++ b/index.js
@@ -8,7 +8,6 @@ import { default as LanguageNotice } from "./composites/Plugin/Shared/components
 import { default as ContentAnalysis } from "./composites/Plugin/ContentAnalysis/components/ContentAnalysis";
 import { default as Collapsible } from "./composites/Plugin/Shared/components/Collapsible";
 
-
 export {
 	OnboardingWizard,
 	AlgoliaSearcher,