diff --git a/.storybook/image-snapshots/expected/components_StatusPill_Default.png b/.storybook/image-snapshots/expected/components_StatusPill_Default.png
new file mode 100644
index 000000000..99db065b7
Binary files /dev/null and b/.storybook/image-snapshots/expected/components_StatusPill_Default.png differ
diff --git a/src/components/StatusPill/StatusPill.stories.tsx b/src/components/StatusPill/StatusPill.stories.tsx
new file mode 100644
index 000000000..463bb7721
--- /dev/null
+++ b/src/components/StatusPill/StatusPill.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react/types-6-0';
+
+import StatusPill from './StatusPill';
+import { Inline } from '../layout';
+
+export default {
+ title: 'components/StatusPill',
+ component: StatusPill,
+} as Meta;
+
+export const Default: Story = () => (
+
+
+
+
+
+
+);
diff --git a/src/components/StatusPill/StatusPill.tsx b/src/components/StatusPill/StatusPill.tsx
new file mode 100644
index 000000000..66e8e6393
--- /dev/null
+++ b/src/components/StatusPill/StatusPill.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { StatusDot } from '../StatusDot/index';
+import { StatusPillProps } from './StatusPill.types';
+import PillLabel from '../Pill/PillLabel';
+import { SpaceSizes } from '../../theme';
+import { Inline, Padbox } from '../layout';
+import { PaddingTypes } from '../layout/Padbox/Padbox.enums';
+import { getColor, getRadii, pxToRem } from '../../utils';
+
+const StyledPillWrapper = Styled(Padbox)`
+ display: inline-block;
+ height: ${pxToRem(24)};
+ min-width: 0;
+ border-radius: ${getRadii('round')};
+ border: 1px solid ${getColor('neutral.200')};
+ background-color: ${getColor('neutral.0')};
+ padding-right: ${pxToRem(6)};
+ padding-top: ${pxToRem(3)};
+`;
+
+const StatusPill: React.FC = ({
+ color = 'inactive',
+ label,
+}) => (
+
+
+
+ {label}
+
+
+);
+
+StatusPill.propTypes = {
+ label: PropTypes.string.isRequired,
+ color: PropTypes.string,
+};
+export default StatusPill;
diff --git a/src/components/StatusPill/StatusPill.types.ts b/src/components/StatusPill/StatusPill.types.ts
new file mode 100644
index 000000000..609bf089c
--- /dev/null
+++ b/src/components/StatusPill/StatusPill.types.ts
@@ -0,0 +1,6 @@
+import { StatusDotColors } from '../StatusDot';
+
+export interface StatusPillProps {
+ color?: keyof typeof StatusDotColors;
+ label: string;
+}
diff --git a/src/components/StatusPill/index.ts b/src/components/StatusPill/index.ts
new file mode 100644
index 000000000..151fbe9fc
--- /dev/null
+++ b/src/components/StatusPill/index.ts
@@ -0,0 +1 @@
+export { default as StatusPill } from './StatusPill';