diff --git a/packages/ui/package.json b/packages/ui/package.json
index c214e38..561ac17 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -37,7 +37,7 @@
     "chromatic": "chromatic --project-token=$(dotenvx get CHROMATIC_PROJECT_TOKEN)"
   },
   "imports": {
-    "$icons/16": "./src/lib/icons/cfp/size-16/*"
+    "#icons": "./src/lib/icons/index.ts"
   },
   "exports": {
     ".": {
@@ -158,6 +158,7 @@
     "@melt-ui/svelte": "^0.85.0",
     "chalk": "^5.3.0",
     "class-variance-authority": "^0.7.0",
+    "colord": "^2.9.3",
     "figma-kit": "1.0.0-beta.18",
     "svelte": "^4.2.0",
     "tslib": "^2.8.0",
diff --git a/packages/ui/src/lib/components/badge/badge.stories.svelte b/packages/ui/src/lib/components/badge/badge.stories.svelte
index b45b16b..88106c7 100644
--- a/packages/ui/src/lib/components/badge/badge.stories.svelte
+++ b/packages/ui/src/lib/components/badge/badge.stories.svelte
@@ -1,8 +1,8 @@
 <script context="module" lang="ts">
 	import { Story } from '@storybook/addon-svelte-csf';
-	import Badge from './badge.svelte';
-	import { IconButton } from '../icon-button';
 	import { Icon } from '../icon';
+	import { IconButton } from '../icon-button';
+	import Badge from './badge.svelte';
 
 	export const meta = {
 		title: 'Badge',
@@ -30,11 +30,11 @@
 </Story>
 
 <Story name="Without Actions">
-	<Badge text="Simple Tag" color="#ffcc00" showActions={false} />
+	<Badge text="Simple Tag" color="#ffcc00" />
 </Story>
 
 <Story name="Disabled">
-	<Badge text="Disabled Tag" color="#1BC47D" disabled={true}>
+	<Badge text="Disabled Tag" color="#1BC47D">
 		<svelte:fragment slot="actions">
 			<IconButton>
 				<Icon icon="AdjustSvg" />
@@ -45,4 +45,3 @@
 		</svelte:fragment>
 	</Badge>
 </Story>
-
diff --git a/packages/ui/src/lib/components/badge/badge.svelte b/packages/ui/src/lib/components/badge/badge.svelte
index 27eb217..541f635 100644
--- a/packages/ui/src/lib/components/badge/badge.svelte
+++ b/packages/ui/src/lib/components/badge/badge.svelte
@@ -1,22 +1,94 @@
 <script lang="ts">
+	import Text from '$ui/typography/text.svelte';
+	import { type VariantProps, cva } from 'class-variance-authority';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	const badge = cva('fps-Badge', {
+		variants: {
+			hasActions: {
+				true: 'fps-has-actions'
+			},
+			size: {
+				small: 'fps-size-small',
+				medium: 'fps-size-medium'
+			},
+			noDot: {
+				true: 'fps-no-dot'
+			}
+		},
+		defaultVariants: {
+			hasActions: false,
+			size: 'small',
+			noDot: false
+		}
+	});
+
+	/** Configuration object for badge colors */
+	interface ColorConfig {
+		/** Color of the dot indicator */
+		dot?: string;
+		/** Background color of the badge */
+		bg?: string;
+		/** Text color of the badge */
+		text?: string;
+	}
+
+	interface $$Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badge> {
+		/** Text content of the badge */
+		text?: string;
+		/** Color configuration for the badge */
+		colors?: ColorConfig;
+		/** Whether to hide the dot indicator */
+		'no-dot'?: boolean;
+		/** @deprecated Use colors.dot instead */
+		color?: string;
+	}
+
+	/** Text content of the badge */
 	export let text = '';
+	/** Color configuration for the badge */
+	export let colors: ColorConfig = {};
+	/** @deprecated Use colors.dot instead */
 	export let color = '';
-	export let disabled = false;
+	/** Whether to show action buttons */
 	export let showActions = true;
+	/** Size of the badge: 'small' | 'medium' */
+	export let size: $$Props['size'] = 'medium';
+
+  const noDot = $$props['no-dot'];
+
+	// Handle deprecated color prop
+	$: if (color && !colors.dot) {
+		colors = { ...colors, dot: color };
+	}
 </script>
 
-<div class="div-LayerTag">
-	<div class="LayerTag">
-		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				d="M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z"
-				fill={color}
-			/>
-		</svg>
-		<span class:disabled>{text}</span>
+<div class="fps-Badge-wrapper">
+	<div
+		class={badge({ hasActions: showActions, size, noDot, class: $$props.class })}
+		style:background-color={colors.bg}
+		style:color={colors.text}
+	>
+		{#if !$$props['no-dot']}
+			<svg
+				width="16"
+				height="16"
+				viewBox="0 0 16 16"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				class="fps-Badge-dot"
+			>
+				<path
+					d="M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z"
+					fill={colors.dot || color}
+				/>
+			</svg>
+		{/if}
+		<Text emphasis="secondary" size={size}>
+      <span style:color={colors.text}>{text}</span>
+    </Text>
 		{#if showActions}
 			<slot name="actions">
-				<!-- Ações padrão -->
 				<slot />
 			</slot>
 		{/if}
@@ -24,27 +96,43 @@
 </div>
 
 <style lang="scss">
-	.LayerTag {
+	.fps-Badge-wrapper {
+		flex: none;
+		order: 0;
+		flex-grow: 0;
+		margin-left: var(--space-2);
+	}
+
+	.fps-Badge {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		padding: 6px;
-		gap: 8px;
-		border: 1px solid #f0f0f0;
-		border-radius: 6px;
-		color: var(--figma-color-text);
+		padding: var(--space-1);
+		gap: var(--space-1);
+		border: 1px solid var(--figma-color-border);
+		border-radius: var(--radius-medium);
 		font-family: var(--font-family-default);
-		font-size: x-small;
-	}
 
-	.div-LayerTag {
-		flex: none;
-		order: 0;
-		flex-grow: 0;
-		margin-left: 8px;
+		&:where(.fps-size-small) {
+			font-size: var(--font-size-1);
+			padding: 2px 4px;
+		}
+
+		&:where(.fps-size-medium) {
+			font-size: var(--font-size-2);
+			padding: 4px 6px;
+		}
+
+		&:where(.fps-has-actions) {
+			padding-right: var(--space-2);
+		}
+
+		&:where(.fps-no-dot) {
+			padding-left: var(--space-2);
+		}
 	}
 
-	.disabled {
-		color: var(--figma-color-text-disabled);
+	.fps-Badge-dot {
+		flex-shrink: 0;
 	}
 </style>