diff --git a/.betterer/.betterer.results b/.betterer/.betterer.results
index c6e446f5e..b3c1de3c4 100644
--- a/.betterer/.betterer.results
+++ b/.betterer/.betterer.results
@@ -11,7 +11,7 @@ exports[`no more deprecated components`] = {
"../src/components/FlexContainer/index.ts:1246547685": [
[0, 0, 59, "\'./FlexContainer\' import is restricted from being used by a pattern. FlexContainer is deprecated. Please use Layout primitives instead.", "3330215570"]
],
- "../src/components/index.ts:3052257943": [
+ "../src/components/index.ts:3583195122": [
[18, 0, 32, "\'./FlexContainer\' import is restricted from being used by a pattern. FlexContainer is deprecated. Please use Layout primitives instead.", "726759703"]
]
}`
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/StatusDot/StatusDot.tsx b/src/components/StatusDot/StatusDot.tsx
index fa16212cd..41ee8874e 100644
--- a/src/components/StatusDot/StatusDot.tsx
+++ b/src/components/StatusDot/StatusDot.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { getRadii, pxToRem } from '../../utils';
-const StatusDotColors = {
+export const StatusDotColors = {
good: '100, 244, 81',
bad: '242, 46, 67',
neutral: '84, 129, 217',
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..77e1706a3
--- /dev/null
+++ b/src/components/StatusPill/StatusPill.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import Styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { StatusDot } from '../StatusDot/index';
+import { StatusDotColors } from '../StatusDot/StatusDot';
+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.oneOf(Object.keys(StatusDotColors)),
+};
+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..3a1cc69c3
--- /dev/null
+++ b/src/components/StatusPill/StatusPill.types.ts
@@ -0,0 +1,6 @@
+import { StatusDotColors } from '../StatusDot/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';
diff --git a/src/components/index.ts b/src/components/index.ts
index 0ed009616..220587696 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -33,6 +33,7 @@ export * from './SingleDatePicker';
export * from './SortableList';
export * from './Spinner';
export * from './StatusDot';
+export * from './StatusPill';
export * from './Stepper';
export * from './Table';
export * from './Tabs';