diff --git a/src/ViewMoreText/README.mdx b/src/ViewMoreText/README.mdx
new file mode 100644
index 00000000..bb4fe15d
--- /dev/null
+++ b/src/ViewMoreText/README.mdx
@@ -0,0 +1,36 @@
+---
+name: ViewMoreText
+menu: Components
+---
+
+import {Playground, Props} from 'docz';
+
+import InlineList from '../InlineList';
+import ViewMoreText from './';
+
+# ViewMoreText
+
+Truncates a piece of text by a specified amount and displays a "View more" button at the end of it, which will reveal the rest of the text when clicked.
+
+The labels of the "View more" and "View less" buttons can be customised using the props `viewMoreLabel` and `viewLessLabel`.
+
+## Examples
+
+<Playground>
+	<ViewMoreText
+		content="This is a short example text with a disappointing reveal."
+		truncateBy={26}
+	/>
+	<br />
+	<br />
+	<ViewMoreText
+		content="Here comes a longer, tastier example. Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula."
+		truncateBy={150}
+		viewMoreLabel="Read more"
+		viewLessLabel="I don't care about any of that"
+	/>
+</Playground>
+
+## Props
+
+<Props of={ViewMoreText} />
diff --git a/src/ViewMoreText/index.js b/src/ViewMoreText/index.js
new file mode 100644
index 00000000..842c5380
--- /dev/null
+++ b/src/ViewMoreText/index.js
@@ -0,0 +1,42 @@
+import React, {Fragment, useState} from 'react';
+import PropTypes from 'prop-types';
+
+import truncateText from '../utils/truncateText';
+import TextLink from '../TextLink';
+
+function ViewMoreText(props) {
+	const {
+		content,
+		truncateBy = 110,
+		viewMoreLabel = 'View more',
+		viewLessLabel = 'View less',
+	} = props;
+
+	const [showMore, setShowmore] = useState(false);
+
+	function toggleShowMore() {
+		setShowmore(prevState => !prevState);
+	}
+
+	const shouldTextBeTruncated = content && content.length > truncateBy;
+
+	return (
+		<Fragment>
+			{truncateText(content, showMore ? null : truncateBy)}{' '}
+			{shouldTextBeTruncated && (
+				<TextLink as="button" onClick={toggleShowMore}>
+					{showMore ? viewLessLabel : viewMoreLabel}
+				</TextLink>
+			)}
+		</Fragment>
+	);
+}
+
+ViewMoreText.propTypes = {
+	content: PropTypes.string.isRequired,
+	truncateBy: PropTypes.number,
+	viewMoreLabel: PropTypes.string,
+	viewLessLabel: PropTypes.string,
+};
+
+export default ViewMoreText;