diff --git a/src/chrome/PluginDebugger.js b/src/chrome/PluginDebugger.js
index db22f64c0..3b85209e0 100644
--- a/src/chrome/PluginDebugger.js
+++ b/src/chrome/PluginDebugger.js
@@ -21,6 +21,7 @@ import {
colors,
Link,
} from 'flipper';
+import StatusIndicator from '../ui/components/StatusIndicator';
const Container = styled(FlexColumn)({
padding: 10,
@@ -59,15 +60,9 @@ const TableContainer = styled('div')({
display: 'flex',
});
-const Lamp = styled('div')(props => ({
- width: 10,
- height: 10,
- borderRadius: 5,
- backgroundColor: props.on ? colors.lime : colors.red,
- border: `1px solid ${colors.blackAlpha30}`,
- marginTop: 6,
- flexShrink: 0,
-}));
+const Lamp = props => (
+
+);
type Props = {|
devicePlugins: Array>,
diff --git a/src/ui/components/StatusIndicator.js b/src/ui/components/StatusIndicator.js
new file mode 100644
index 000000000..8008ca0bb
--- /dev/null
+++ b/src/ui/components/StatusIndicator.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2019-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {colors, styled} from 'flipper';
+import type {Element} from 'react';
+
+type Props = {
+ statusColor: string,
+ diameter?: number | string,
+ title?: string,
+};
+
+const StatusIndicator: Props => Element<'div'> = styled('div')(
+ ({statusColor, diameter = 10, title}) => ({
+ alignSelf: 'center',
+ backgroundColor: statusColor,
+ border: `1px solid ${colors.blackAlpha30}`,
+ borderRadius: '50%',
+ flexShrink: 0,
+ height: diameter,
+ title,
+ width: diameter,
+ }),
+);
+
+export default StatusIndicator;
diff --git a/src/ui/index.js b/src/ui/index.js
index 9750809d0..0aec53693 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -124,6 +124,7 @@ export {default as ModalOverlay} from './components/ModalOverlay.js';
export {default as Tooltip} from './components/Tooltip.js';
export {default as TooltipProvider} from './components/TooltipProvider.js';
export {default as ResizeSensor} from './components/ResizeSensor.js';
+export {default as StatusIndicator} from './components/StatusIndicator.js';
// typography
export {default as HorizontalRule} from './components/HorizontalRule.js';