diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx
index d741b6df4723..6af9ca751211 100644
--- a/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx
+++ b/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx
@@ -1,5 +1,5 @@
 import { StatusBadge } from './StatusBadge';
-import { TestingStates } from '../../Panel';
+import { CallState } from '../../types';
 
 export default {
   title: 'StatusBadge',
@@ -8,13 +8,13 @@ export default {
 };
 
 export const Pass = {
-  args: { status: TestingStates.DONE },
+  args: { status: CallState.DONE },
 };
 
 export const Runs = {
-  args: { status: TestingStates.PENDING },
+  args: { status: CallState.PENDING },
 };
 
 export const Fail = {
-  args: { status: TestingStates.ERROR },
+  args: { status: CallState.ERROR },
 };
diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx
index ae51e92284d4..620a9cf41e68 100644
--- a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx
+++ b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { styled, typography } from '@storybook/theming';
-import { TestState, TestingStates } from '../../Panel';
+import { CallState } from '../../types';
 import { theme } from '../../theme';
 
 export interface StatusBadgeProps {
-  status: TestState;
+  status: `${CallState}`;
 }
 const {
   colors: {
@@ -14,9 +14,9 @@ const {
 
 const StyledBadge = styled.div(({ status }: StatusBadgeProps) => {
   const backgroundColor = {
-    [TestingStates.DONE]: green,
-    [TestingStates.ERROR]: red,
-    [TestingStates.PENDING]: ochre,
+    [CallState.DONE]: green,
+    [CallState.ERROR]: red,
+    [CallState.PENDING]: ochre,
   }[status];
   return {
     padding: '4px 8px',
@@ -35,9 +35,9 @@ const StyledBadge = styled.div(({ status }: StatusBadgeProps) => {
 
 export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
   const badgeText = {
-    [TestingStates.DONE]: 'Pass',
-    [TestingStates.ERROR]: 'Fail',
-    [TestingStates.PENDING]: 'Runs',
+    [CallState.DONE]: 'Pass',
+    [CallState.ERROR]: 'Fail',
+    [CallState.PENDING]: 'Runs',
   }[status];
   return <StyledBadge status={status}>{badgeText}</StyledBadge>;
 };