diff --git a/src/ui/components/StatusIndicator.js b/src/ui/components/StatusIndicator.tsx
similarity index 67%
rename from src/ui/components/StatusIndicator.js
rename to src/ui/components/StatusIndicator.tsx
index b2fb99638..e874086d2 100644
--- a/src/ui/components/StatusIndicator.js
+++ b/src/ui/components/StatusIndicator.tsx
@@ -6,16 +6,16 @@
  */
 
 import {colors, styled} from 'flipper';
-import type {Element} from 'react';
+import {BackgroundColorProperty, HeightProperty} from 'csstype';
 
 type Props = {
-  statusColor: string,
-  diameter?: number | string,
-  title?: string,
+  statusColor: BackgroundColorProperty;
+  diameter?: HeightProperty<number>;
+  title?: string;
 };
 
-const StatusIndicator: Props => Element<'div'> = styled('div')(
-  ({statusColor, diameter = 10, title}) => ({
+const StatusIndicator = styled('div')(
+  ({statusColor, diameter = 10, title}: Props) => ({
     alignSelf: 'center',
     backgroundColor: statusColor,
     border: `1px solid ${colors.blackAlpha30}`,
diff --git a/src/ui/index.js b/src/ui/index.js
index 205fb8c90..4991576a8 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -133,7 +133,7 @@ export {default as ModalOverlay} from './components/ModalOverlay.tsx';
 export {default as Tooltip} from './components/Tooltip.js';
 export {default as TooltipProvider} from './components/TooltipProvider.js';
 export {default as ResizeSensor} from './components/ResizeSensor.tsx';
-export {default as StatusIndicator} from './components/StatusIndicator.js';
+export {default as StatusIndicator} from './components/StatusIndicator.tsx';
 
 // typography
 export {default as HorizontalRule} from './components/HorizontalRule.js';