diff --git a/src/components/index.ts b/src/components/index.ts
index 7202ab8fd0..6e6d60192a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -71,6 +71,9 @@ export * from './menu';
 export { default as PlainButton } from './plain-button';
 export * from './plain-button';
 
+export { default as PillCloud } from './pill-cloud';
+export * from './pill-cloud';
+
 export { default as Portal } from './portal';
 export * from './portal';
 
diff --git a/src/components/pill-cloud/PillCloud.js b/src/components/pill-cloud/PillCloud.js.flow
similarity index 100%
rename from src/components/pill-cloud/PillCloud.js
rename to src/components/pill-cloud/PillCloud.js.flow
diff --git a/src/components/pill-cloud/PillCloud.stories.js b/src/components/pill-cloud/PillCloud.stories.tsx
similarity index 89%
rename from src/components/pill-cloud/PillCloud.stories.js
rename to src/components/pill-cloud/PillCloud.stories.tsx
index f837711188..3f1ecdfb8b 100644
--- a/src/components/pill-cloud/PillCloud.stories.js
+++ b/src/components/pill-cloud/PillCloud.stories.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 
-import PillCloud from './PillCloud';
+import PillCloud, { PillCloudOption } from './PillCloud';
 import notes from './PillCloud.stories.md';
 
-const pills = [
+const pills: PillCloudOption[] = [
     { value: 0, displayText: 'Box' },
     { value: 1, displayText: 'Fox' },
     { value: 2, displayText: 'Socks' },
@@ -23,7 +23,7 @@ const pills = [
 ];
 export const regular = () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [selectedOption, setSelectedOption] = useState(pills[5]);
+    const [selectedOption, setSelectedOption] = useState<PillCloudOption>(pills[5]);
     return (
         <div>
             <PillCloud
diff --git a/src/components/pill-cloud/PillCloud.tsx b/src/components/pill-cloud/PillCloud.tsx
new file mode 100644
index 0000000000..65de39d8f8
--- /dev/null
+++ b/src/components/pill-cloud/PillCloud.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import isEqual from 'lodash/isEqual';
+
+import Button from '../button';
+import { ButtonProps } from '../button/Button';
+
+export interface PillCloudOption {
+    /** Text shown on the pill */
+    displayText: string;
+    id?: string;
+    /** Value used as the pill key and resin target */
+    value: string | number | null;
+}
+
+export interface PillCloudProps {
+    /** Props forwarded to each pill Button */
+    buttonProps?: Partial<ButtonProps> & Record<string, unknown>;
+    /** Called with the option when a pill is clicked */
+    onSelect?: (option: PillCloudOption) => void;
+    /** Options to render as pills */
+    options: Array<PillCloudOption>;
+    /** Currently selected options */
+    selectedOptions?: Array<PillCloudOption>;
+}
+
+const PillCloud = ({ options, onSelect, selectedOptions = [], buttonProps = {} }: PillCloudProps) => (
+    <div className="bdl-PillCloud pill-cloud-container">
+        {options?.map(option => (
+            <Button
+                key={option.value}
+                className={classNames('bdl-Pill', 'bdl-PillCloud-button', 'pill', 'pill-cloud-button', {
+                    'is-selected': selectedOptions.find(op => isEqual(op, option)),
+                })}
+                onClick={onSelect ? () => onSelect(option) : undefined}
+                data-resin-target={option.value}
+                {...buttonProps}
+            >
+                {option.displayText}
+            </Button>
+        ))}
+    </div>
+);
+
+export default PillCloud;
diff --git a/src/components/pill-cloud/__tests__/PillCloud.test.js b/src/components/pill-cloud/__tests__/PillCloud.test.tsx
similarity index 89%
rename from src/components/pill-cloud/__tests__/PillCloud.test.js
rename to src/components/pill-cloud/__tests__/PillCloud.test.tsx
index 70e2c242d0..2ba031414e 100644
--- a/src/components/pill-cloud/__tests__/PillCloud.test.js
+++ b/src/components/pill-cloud/__tests__/PillCloud.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { shallow } from 'enzyme';
 
 import PillCloud from '..';
 
@@ -45,12 +46,7 @@ describe('components/pill-cloud/PillCloud', () => {
         ];
         const wrapper = shallow(<PillCloud options={pills} selectedOptions={[pills[1]]} />);
         const buttons = wrapper.find('.bdl-PillCloud-button');
-        expect(
-            buttons
-                .at(1)
-                .props()
-                .className.includes('is-selected'),
-        ).toBeTruthy();
+        expect(buttons.at(1).props().className.includes('is-selected')).toBeTruthy();
     });
 
     test('should add selected class to a selected pill when passed by value', () => {
@@ -61,12 +57,7 @@ describe('components/pill-cloud/PillCloud', () => {
         ];
         const wrapper = shallow(<PillCloud options={pills} selectedOptions={[{ value: 3, displayText: 'Sir' }]} />);
         const buttons = wrapper.find('.bdl-PillCloud-button');
-        expect(
-            buttons
-                .at(2)
-                .props()
-                .className.includes('is-selected'),
-        ).toBeTruthy();
+        expect(buttons.at(2).props().className.includes('is-selected')).toBeTruthy();
     });
 
     test('should pass selected child through to onSelect', () => {
diff --git a/src/components/pill-cloud/__tests__/__snapshots__/PillCloud.test.js.snap b/src/components/pill-cloud/__tests__/__snapshots__/PillCloud.test.tsx.snap
similarity index 100%
rename from src/components/pill-cloud/__tests__/__snapshots__/PillCloud.test.js.snap
rename to src/components/pill-cloud/__tests__/__snapshots__/PillCloud.test.tsx.snap
diff --git a/src/components/pill-cloud/index.js b/src/components/pill-cloud/index.js.flow
similarity index 100%
rename from src/components/pill-cloud/index.js
rename to src/components/pill-cloud/index.js.flow
diff --git a/src/components/pill-cloud/index.ts b/src/components/pill-cloud/index.ts
new file mode 100644
index 0000000000..00e6864c93
--- /dev/null
+++ b/src/components/pill-cloud/index.ts
@@ -0,0 +1,2 @@
+export { default } from './PillCloud';
+export type { PillCloudOption, PillCloudProps } from './PillCloud';