diff --git a/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx b/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx
index 35fc575c0..9c91fe7e0 100644
--- a/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx
+++ b/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx
@@ -88,7 +88,7 @@ export const DefaultStory = Template.bind({});
 
 DefaultStory.storyName = 'Default';
 
-export const Children = () => (
+export const Children: ComponentStory<typeof BadgeWrapper> = () => (
   <Box display={DISPLAY.FLEX} gap={4}>
     <BadgeWrapper
       badge={
@@ -140,7 +140,7 @@ export const Children = () => (
   </Box>
 );
 
-export const Badge = () => (
+export const Badge: ComponentStory<typeof BadgeWrapper> = () => (
   <Box display={DISPLAY.FLEX} gap={4}>
     <BadgeWrapper
       badge={
@@ -207,7 +207,7 @@ export const Badge = () => (
   </Box>
 );
 
-export const Position = () => (
+export const Position: ComponentStory<typeof BadgeWrapper> = () => (
   <Box display={DISPLAY.FLEX} gap={4}>
     <BadgeWrapper
       position={BadgeWrapperPosition.topLeft}
@@ -263,7 +263,7 @@ export const Position = () => (
   </Box>
 );
 
-export const PositionObj = () => (
+export const PositionObj: ComponentStory<typeof BadgeWrapper> = () => (
   <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={4}>
     <BadgeWrapper
       badge={
@@ -281,7 +281,7 @@ export const PositionObj = () => (
   </Box>
 );
 
-export const AnchorElementShape = () => (
+export const AnchorElementShape: ComponentStory<typeof BadgeWrapper> = () => (
   <Box display={DISPLAY.FLEX} gap={4}>
     <BadgeWrapper
       badge={