diff --git a/packages/react/src/components/status/status.test.tsx b/packages/react/src/components/status/status.test.tsx
new file mode 100644
index 0000000000..8594bbb151
--- /dev/null
+++ b/packages/react/src/components/status/status.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Status, StatusType } from './status';
+import { mountWithTheme } from '../../test-utils/renderer';
+
+const statusTypesArray: StatusType[] = ['enabled', 'disabled', 'blocked'];
+
+describe('Status', () => {
+ statusTypesArray.forEach((type) => (
+ it(`matches snapshot (${type})`, () => {
+ const tree = mountWithTheme();
+
+ expect(tree).toMatchSnapshot();
+ })
+ ));
+});
diff --git a/packages/react/src/components/status/status.test.tsx.snap b/packages/react/src/components/status/status.test.tsx.snap
new file mode 100644
index 0000000000..e684f8870d
--- /dev/null
+++ b/packages/react/src/components/status/status.test.tsx.snap
@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Status matches snapshot (blocked) 1`] = `
+.c0 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.c1 {
+ background-color: #CD2C23;
+ border: none;
+ border-radius: 50%;
+ box-sizing: border-box;
+ height: 10px;
+ margin-right: calc(var(--spacing-base) * 1.5);
+ width: 10px;
+}
+
+
+
+
+
+
+`;
+
+exports[`Status matches snapshot (disabled) 1`] = `
+.c0 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ color: #60666E;
+}
+
+.c1 {
+ background-color: #FFFFFF;
+ border: 1px solid #60666E;
+ border-radius: 50%;
+ box-sizing: border-box;
+ height: 10px;
+ margin-right: calc(var(--spacing-base) * 1.5);
+ width: 10px;
+}
+
+
+
+
+
+
+`;
+
+exports[`Status matches snapshot (enabled) 1`] = `
+.c0 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.c1 {
+ background-color: #008533;
+ border: none;
+ border-radius: 50%;
+ box-sizing: border-box;
+ height: 10px;
+ margin-right: calc(var(--spacing-base) * 1.5);
+ width: 10px;
+}
+
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/status/status.tsx b/packages/react/src/components/status/status.tsx
new file mode 100644
index 0000000000..6d3c4e55ef
--- /dev/null
+++ b/packages/react/src/components/status/status.tsx
@@ -0,0 +1,45 @@
+import React, { VoidFunctionComponent } from 'react';
+import styled from 'styled-components';
+import { Theme } from '../../themes';
+
+export type StatusType = 'enabled' | 'disabled' | 'blocked';
+
+function getBackgroundColor(type: StatusType, theme: Theme): string {
+ switch (type) {
+ case 'enabled':
+ return theme.notifications['success-1.1'];
+ case 'disabled':
+ return theme.greys.white;
+ case 'blocked':
+ return theme.notifications['error-2.1'];
+ }
+}
+
+const Wrapper = styled.div<{ type: StatusType }>`
+ align-items: center;
+ display: flex;
+
+ ${({ type, theme }) => type === 'disabled' && `color: ${theme.greys['dark-grey']}`}
+`;
+
+const Circle = styled.div<{ type: StatusType }>`
+ background-color: ${({ type, theme }) => getBackgroundColor(type, theme)};
+ border: ${({ type, theme }) => (type === 'disabled' ? `1px solid ${theme.greys['dark-grey']}` : 'none')};
+ border-radius: 50%;
+ box-sizing: border-box;
+ height: 10px;
+ margin-right: calc(var(--spacing-base) * 1.5);
+ width: 10px;
+`;
+
+interface Props {
+ label: string;
+ type: StatusType;
+}
+
+export const Status: VoidFunctionComponent = ({ label, type }) => (
+
+
+ {label}
+
+);
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c0e28ff674..9042583068 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -50,6 +50,7 @@ export * from './components/table/table';
export { Modal } from './components/modal/modal';
export { ModalDialog } from './components/modal/modal-dialog';
export { Tag, Tags } from './components/tags/tags';
+export { Status } from './components/status/status';
export { SkipLink } from './components/skip-link/skip-link';
export { useModal } from './components/modal/use-modal';
export { UserProfile } from './components/user-profile/user-profile';
diff --git a/packages/storybook/stories/status.stories.tsx b/packages/storybook/stories/status.stories.tsx
new file mode 100644
index 0000000000..2a2ed1e5e3
--- /dev/null
+++ b/packages/storybook/stories/status.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Status } from '@equisoft/design-elements-react';
+import { Story } from '@storybook/react';
+
+export default {
+ component: Status,
+ title: 'Data/Status',
+};
+
+export const Normal: Story = () => (
+ <>
+
+
+
+
+);