diff --git a/src/runtime/components/elements/Badge.vue b/src/runtime/components/elements/Badge.vue
index fc3d44b7..eb7f8cd7 100644
--- a/src/runtime/components/elements/Badge.vue
+++ b/src/runtime/components/elements/Badge.vue
@@ -10,11 +10,10 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { NestedKeyOf, Strategy } from '../../types'
+import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { badge } from '#ui/ui.config'
-import colors from '#ui-colors'
 
 const config = mergeConfig<typeof badge>(appConfig.ui.strategy, appConfig.ui.badge, badge)
 
@@ -22,21 +21,21 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     size: {
-      type: String as PropType<keyof typeof config.size>,
+      type: String as PropType<BadgeSize>,
       default: () => config.default.size,
       validator (value: string) {
         return Object.keys(config.size).includes(value)
       }
     },
     color: {
-      type: String as PropType<keyof typeof config.color | typeof colors[number]>,
+      type: String as PropType<BadgeColor>,
       default: () => config.default.color,
       validator (value: string) {
         return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
       }
     },
     variant: {
-      type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
+      type: String as PropType<BadgeVariant>,
       default: () => config.default.variant,
       validator (value: string) {
         return [
diff --git a/src/runtime/types/badge.d.ts b/src/runtime/types/badge.d.ts
new file mode 100644
index 00000000..5bfc5c29
--- /dev/null
+++ b/src/runtime/types/badge.d.ts
@@ -0,0 +1,14 @@
+import { badge } from '../ui.config'
+import type { NestedKeyOf } from '.'
+import colors from '#ui-colors'
+
+export type BadgeSize = keyof typeof badge.size
+export type BadgeColor = keyof typeof badge.color | typeof colors[number]
+export type BadgeVariant = keyof typeof badge.variant | NestedKeyOf<typeof badge.color>
+
+export interface Badge {
+  label?: string
+  size?: BadgeSize
+  color?: BadgeColor
+  variant?: BadgeVariant
+}
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 000af042..c4d55fbc 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -1,5 +1,6 @@
 export * from './accordion'
 export * from './avatar'
+export * from './badge'
 export * from './button'
 export * from './clipboard'
 export * from './command-palette'