diff --git a/src/ui/components/ToggleSwitch.js b/src/ui/components/ToggleSwitch.tsx
similarity index 82%
rename from src/ui/components/ToggleSwitch.js
rename to src/ui/components/ToggleSwitch.tsx
index e1d776430..69b69fdd7 100644
--- a/src/ui/components/ToggleSwitch.js
+++ b/src/ui/components/ToggleSwitch.tsx
@@ -6,11 +6,11 @@
  */
 
 import React from 'react';
-import styled from '../styled/index.js';
-import {colors} from './colors.tsx';
-import Text from './Text.tsx';
+import styled from 'react-emotion';
+import {colors} from './colors';
+import Text from './Text';
 
-export const StyledButton = styled('div')(props => ({
+export const StyledButton = styled('div')((props: {toggled: boolean}) => ({
   cursor: 'pointer',
   width: '30px',
   height: '16px',
@@ -41,13 +41,13 @@ type Props = {
   /**
    * onClick handler.
    */
-  onClick?: (event: SyntheticMouseEvent<>) => void,
+  onClick?: (event: React.MouseEvent) => void;
   /**
    * whether the button is toggled
    */
-  toggled?: boolean,
-  className?: string,
-  label?: string,
+  toggled?: boolean;
+  className?: string;
+  label?: string;
 };
 
 /**
diff --git a/src/ui/components/searchable/Searchable.js b/src/ui/components/searchable/Searchable.js
index f4c127001..55338b37f 100644
--- a/src/ui/components/searchable/Searchable.js
+++ b/src/ui/components/searchable/Searchable.js
@@ -18,7 +18,7 @@ import Glyph from '../Glyph.js';
 import FilterToken from './FilterToken.js';
 import styled from '../../styled/index.js';
 import debounce from 'lodash.debounce';
-import ToggleSwitch from '../ToggleSwitch';
+import ToggleSwitch from '../ToggleSwitch.tsx';
 
 const SearchBar = styled(Toolbar)({
   height: 42,
diff --git a/src/ui/index.js b/src/ui/index.js
index 66af5cb90..68bbc8f43 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -7,7 +7,7 @@
 
 export {default as styled} from 'react-emotion';
 export {default as Button} from './components/Button.js';
-export {default as ToggleButton} from './components/ToggleSwitch.js';
+export {default as ToggleButton} from './components/ToggleSwitch.tsx';
 export {
   default as ButtonNavigationGroup,
 } from './components/ButtonNavigationGroup.js';