diff --git a/src/components/elements/CopyableText.js b/src/components/elements/CopyableText.js
new file mode 100644
index 0000000..f5cfd50
--- /dev/null
+++ b/src/components/elements/CopyableText.js
@@ -0,0 +1,49 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components/macro';
+import { NotificationDispatchContext } from '../../contexts/NotificationContext';
+import Button from './Button';
+
+const Span = styled.span`
+ text-align: left;
+`;
+
+const StyledButton = styled(Button)`
+ margin-left: 1rem;
+`;
+
+const CopyableText = props => {
+ const dispatch = useContext(NotificationDispatchContext);
+
+ const copyText = async () => {
+ try {
+ await navigator.clipboard.writeText(props.text);
+ dispatch({
+ type: 'ADD',
+ level: 'success',
+ message: `${props.textType} copied to clipboard`,
+ });
+ } catch (err) {
+ dispatch({
+ type: 'ADD',
+ level: 'error',
+ message: `Unable to copy ${props.textType}, please select the text and right click to copy`,
+ });
+ }
+ };
+
+ return (
+
+ {props.text}
+