+ }
{
diff --git a/client/coral-embed-stream/src/components/InactiveCommentLabel.css b/client/coral-embed-stream/src/components/InactiveCommentLabel.css
new file mode 100644
index 000000000..01ba197b5
--- /dev/null
+++ b/client/coral-embed-stream/src/components/InactiveCommentLabel.css
@@ -0,0 +1,32 @@
+.root {
+ display: inline-block;
+ color: white;
+ background: grey;
+ height: 22px;
+ box-sizing: border-box;
+ line-height: 19px;
+ padding: 2px 6px 2px 4px;
+ border-radius: 2px;
+ font-size: 12px;
+ text-transform: capitalize;
+}
+
+.icon {
+ font-size: 14px;
+ vertical-align: text-top;
+ margin: 0;
+ margin-right: 4px;
+}
+
+.label {
+ display: inline-block;
+}
+
+.premod {
+ background: #063B9A;
+}
+
+.rejected {
+ background: #d03235;
+}
+
diff --git a/client/coral-embed-stream/src/components/InactiveCommentLabel.js b/client/coral-embed-stream/src/components/InactiveCommentLabel.js
new file mode 100644
index 000000000..824692558
--- /dev/null
+++ b/client/coral-embed-stream/src/components/InactiveCommentLabel.js
@@ -0,0 +1,36 @@
+import React, {PropTypes} from 'react';
+import t from 'coral-framework/services/i18n';
+import styles from './InactiveCommentLabel.css';
+import {Icon} from 'coral-ui';
+import cn from 'classnames';
+
+const InactiveCommentLabel = ({status, className, ...rest}) => {
+ let label;
+ let icon;
+
+ switch (status) {
+ case 'PREMOD':
+ label = t('modqueue.premod');
+ icon = 'query_builder';
+ break;
+ case 'REJECTED':
+ label = t('modqueue.rejected');
+ icon = 'close';
+ break;
+ default:
+ throw new Error(`Unknown inactive status ${status}`);
+ }
+
+ return (
+
+
+ {label}
+
+ );
+};
+
+InactiveCommentLabel.propTypes = {
+ status: PropTypes.string.isRequired,
+};
+
+export default InactiveCommentLabel;