diff --git a/src/ui/components/Toolbar.js b/src/ui/components/Toolbar.js
deleted file mode 100644
index caa369b4a..000000000
--- a/src/ui/components/Toolbar.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2018-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} from './colors.tsx';
-import FlexRow from './FlexRow.js';
-import FlexBox from './FlexBox.js';
-import styled from '../styled/index.js';
-
-/**
- * A toolbar.
- */
-const Toolbar = styled(FlexRow)(props => ({
-  backgroundColor: colors.light02,
-  borderBottom:
-    props.position === 'bottom'
-      ? 'none'
-      : `1px solid ${colors.sectionHeaderBorder}`,
-  borderTop:
-    props.position === 'bottom'
-      ? `1px solid ${colors.sectionHeaderBorder}`
-      : 'none',
-  flexShrink: 0,
-  height: props.compact ? 28 : 42,
-  lineHeight: '32px',
-  alignItems: 'center',
-  padding: 6,
-  width: '100%',
-}));
-
-export const Spacer = styled(FlexBox)({
-  flexGrow: 1,
-});
-
-export default Toolbar;
diff --git a/src/ui/components/Toolbar.tsx b/src/ui/components/Toolbar.tsx
new file mode 100644
index 000000000..4ff96cbbe
--- /dev/null
+++ b/src/ui/components/Toolbar.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2018-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} from './colors';
+import FlexRow from './FlexRow';
+import FlexBox from './FlexBox';
+import styled from 'react-emotion';
+
+/**
+ * A toolbar.
+ */
+const Toolbar = styled(FlexRow)(
+  (props: {position?: 'bottom' | 'top'; compact?: boolean}) => ({
+    backgroundColor: colors.light02,
+    borderBottom:
+      props.position === 'bottom'
+        ? 'none'
+        : `1px solid ${colors.sectionHeaderBorder}`,
+    borderTop:
+      props.position === 'bottom'
+        ? `1px solid ${colors.sectionHeaderBorder}`
+        : 'none',
+    flexShrink: 0,
+    height: props.compact ? 28 : 42,
+    lineHeight: '32px',
+    alignItems: 'center',
+    padding: 6,
+    width: '100%',
+  }),
+);
+
+export const Spacer = styled(FlexBox)({
+  flexGrow: 1,
+});
+
+export default Toolbar;
diff --git a/src/ui/components/searchable/Searchable.js b/src/ui/components/searchable/Searchable.js
index 55338b37f..59dc99833 100644
--- a/src/ui/components/searchable/Searchable.js
+++ b/src/ui/components/searchable/Searchable.js
@@ -8,7 +8,7 @@
 import type {Filter} from 'flipper';
 import type {TableColumns} from '../table/types';
 import {PureComponent} from 'react';
-import Toolbar from '../Toolbar.js';
+import Toolbar from '../Toolbar.tsx';
 import FlexRow from '../FlexRow.js';
 import Input from '../Input.js';
 import {colors} from '../colors.tsx';
diff --git a/src/ui/index.js b/src/ui/index.js
index 68bbc8f43..6e1affdc2 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -123,7 +123,7 @@ export {default as FlexBox} from './components/FlexBox.js';
 export {default as FlexRow} from './components/FlexRow.js';
 export {default as FlexColumn} from './components/FlexColumn.js';
 export {default as FlexCenter} from './components/FlexCenter.js';
-export {default as Toolbar, Spacer} from './components/Toolbar.js';
+export {default as Toolbar, Spacer} from './components/Toolbar.tsx';
 export {default as Panel} from './components/Panel.tsx';
 export {default as Text} from './components/Text.tsx';
 export {default as TextParagraph} from './components/TextParagraph.tsx';