diff --git a/.changeset/quick-carpets-beg.md b/.changeset/quick-carpets-beg.md
new file mode 100644
index 00000000000..6f9b2f560ca
--- /dev/null
+++ b/.changeset/quick-carpets-beg.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `StateLabel` to TypeScript
diff --git a/src/StateLabel.js b/src/StateLabel.tsx
similarity index 69%
rename from src/StateLabel.js
rename to src/StateLabel.tsx
index b524cdbbf22..ce234916feb 100644
--- a/src/StateLabel.js
+++ b/src/StateLabel.tsx
@@ -1,12 +1,13 @@
-import React from 'react'
+import { GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon } from '@primer/octicons-react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styled from 'styled-components'
-import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon} from '@primer/octicons-react'
-import {variant} from 'styled-system'
-import theme from './theme'
-import {COMMON, get} from './constants'
+import { variant } from 'styled-system'
+import { COMMON, get, SystemCommonProps } from './constants'
 import StyledOcticon from './StyledOcticon'
-import sx from './sx'
+import sx, { SxProp } from './sx'
+import theme from './theme'
+import { ComponentProps } from './utils/types'
 
 const octiconMap = {
   issueOpened: IssueOpenedIcon,
@@ -27,7 +28,10 @@ const sizeVariants = variant({
   scale: 'stateLabels.sizes'
 })
 
-const StateLabelBase = styled.span`
+type StyledStateLabelBaseProps = {
+  variant?: 'small' | 'normal'; status?: keyof typeof octiconMap} & SystemCommonProps & SxProp
+
+const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   display: inline-flex;
   align-items: center;
   font-weight: 600;
@@ -41,7 +45,9 @@ const StateLabelBase = styled.span`
   ${sx};
 `
 
-function StateLabel({children, status, variant, ...rest}) {
+export type StateLabelProps = ComponentProps<typeof StateLabelBase>
+
+function StateLabel({children, status, variant, ...rest}: StateLabelProps) {
   const octiconProps = variant === 'small' ? {width: '1em'} : {}
   return (
     <StateLabelBase {...rest} variant={variant} status={status}>
diff --git a/src/__tests__/StateLabel.js b/src/__tests__/StateLabel.tsx
similarity index 100%
rename from src/__tests__/StateLabel.js
rename to src/__tests__/StateLabel.tsx
diff --git a/src/__tests__/__snapshots__/StateLabel.js.snap b/src/__tests__/__snapshots__/StateLabel.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/StateLabel.js.snap
rename to src/__tests__/__snapshots__/StateLabel.tsx.snap