fix(ai-o11y): scope overview dashboard to gen_ai spans and move message attributes (#12967)

<!--A few plain bullets saying what changed and why, for a reviewer
skimming it - not a wall of text, not a restatement of the diff, not
generated boilerplate.-->
#### Description
- Top span names and Cost by service use `builder_ai_query`, so non-AI
spans no longer show up.
- LLM cost/token panels filter on `gen_ai.request.model EXISTS`; with
variables on "All" they scanned every span.
- Default span mappers now move (not copy) vendor message keys into
`gen_ai.input.messages` / `gen_ai.output.messages`, as documented.
- Bumped versions: dashboard to 3, `gen_ai.llm` mapper to 3,
`gen_ai.agent` mapper to 2.

<!--Reference issues using `Closes #issue-number` to enable automatic
closure on merge. -->
#### Issues closed by this PR
Part of https://github.com/SigNoz/engineering-pod/issues/6107

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx

@@ -26,7 +26,6 @@ function BreadcrumbItem({
 
 	return (
 		<Button
-			size="md"
 			variant="ghost"
 			color="secondary"
 			className={styles.item}

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx

@@ -34,23 +34,21 @@ function ErrorEmptyState({
 			</div>
 			<div className={styles.actions}>
 				<Button
-					size="md"
 					variant="solid"
 					color="secondary"
 					prefix={<LifeBuoy size={14} />}
 					onClick={onContactSupport}
-					testId="error-contact-support-button"
+					data-testid="error-contact-support-button"
 				>
 					Contact Support
 				</Button>
 				{onRefresh && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						testId="error-refresh-button"
+						data-testid="error-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx

@@ -1,7 +1,11 @@
 import { Copy } from '@signozhq/icons';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
@@ -12,7 +16,20 @@ import { BADGE_GAP, estimateBadgeWidth, OVERFLOW_BADGE_WIDTH } from './utils';
 
 export interface LabelColumnProps {
 	labels: string[];
-	color?: BadgeColorType;
+	color?:
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'error'
+		| 'warning'
+		| 'robin'
+		| 'forest'
+		| 'amber'
+		| 'sienna'
+		| 'cherry'
+		| 'sakura'
+		| 'aqua'
+		| 'vanilla';
 	value?: { [key: string]: string };
 }
 
@@ -87,10 +104,20 @@ function LabelColumn({
 				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
 			))}
 			{remainingLabels.length > 0 && (
-				<Tooltip
-					side="bottom"
-					align="end"
-					title={
+				<TooltipRoot>
+					<TooltipTrigger asChild>
+						<span>
+							<Badge
+								color={color}
+								className={styles.overflowBadge}
+								variant="outline"
+								data-testid="label-overflow-badge"
+							>
+								+{remainingLabels.length}
+							</Badge>
+						</span>
+					</TooltipTrigger>
+					<TooltipContent side="bottom" align="end">
 						<div className={styles.tooltipContent}>
 							<span>
 								{remainingLabels
@@ -113,19 +140,8 @@ function LabelColumn({
 								<Copy size={12} />
 							</button>
 						</div>
-					}
-				>
-					<span>
-						<Badge
-							color={color}
-							className={styles.overflowBadge}
-							variant="outlined"
-							testId="label-overflow-badge"
-						>
-							+{remainingLabels.length}
-						</Badge>
-					</span>
-				</Tooltip>
+					</TooltipContent>
+				</TooltipRoot>
 			)}
 		</div>
 	);

frontend/src/components/Alerts/LabelColumn/LabelTag.tsx

@@ -1,14 +1,31 @@
 import { Copy } from '@signozhq/icons';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
 import { useCopyToClipboard } from 'react-use';
 
 import styles from './LabelTag.module.scss';
 
 export interface LabelTagProps {
 	label: string;
-	color?: BadgeColorType;
+	color?:
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'error'
+		| 'warning'
+		| 'robin'
+		| 'forest'
+		| 'amber'
+		| 'sienna'
+		| 'cherry'
+		| 'sakura'
+		| 'aqua'
+		| 'vanilla';
 	value?: string;
 }
 
@@ -24,8 +41,20 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 	};
 
 	return (
-		<Tooltip
-			title={
+		<TooltipRoot>
+			<TooltipTrigger asChild>
+				<span>
+					<Badge
+						color={color}
+						className={styles.labelBadge}
+						variant="outline"
+						data-testid={`label-tag-${label}`}
+					>
+						<span className={styles.labelValue}>{displayText}</span>
+					</Badge>
+				</span>
+			</TooltipTrigger>
+			<TooltipContent>
 				<div className={styles.tooltipContent}>
 					<span>{displayText}</span>
 					<button
@@ -37,19 +66,8 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 						<Copy size={12} />
 					</button>
 				</div>
-			}
-		>
-			<span>
-				<Badge
-					color={color ?? 'secondary'}
-					className={styles.labelBadge}
-					variant="outlined"
-					testId={`label-tag-${label}`}
-				>
-					<span className={styles.labelValue}>{displayText}</span>
-				</Badge>
-			</span>
-		</Tooltip>
+			</TooltipContent>
+		</TooltipRoot>
 	);
 }
 

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx

@@ -30,23 +30,21 @@ function NoResultsEmptyState({
 			<div className={styles.actions}>
 				{onClear && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						onClick={onClear}
-						testId="no-results-clear-button"
+						data-testid="no-results-clear-button"
 					>
 						{clearButtonText}
 					</Button>
 				)}
 				{onRefresh && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						testId="no-results-refresh-button"
+						data-testid="no-results-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/constants.ts

@@ -1,4 +1,4 @@
-import type { BadgeColorType } from '@signozhq/ui/badge';
+import type { BadgeColor } from '@signozhq/ui/badge';
 
 export const STATE_ORDER = ['firing', 'pending', 'inactive', 'disabled'];
 export const SEVERITY_ORDER = ['critical', 'error', 'warning', 'info'];
@@ -24,9 +24,9 @@ export const SEVERITY_COLORS: Record<string, string> = {
 	info: 'var(--bg-robin-500)',
 };
 
-export const SEVERITY_BADGE_COLORS: Record<string, BadgeColorType> = {
-	critical: 'danger',
-	error: 'danger',
+export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
+	critical: 'error',
+	error: 'error',
 	warning: 'warning',
 	info: 'primary',
 };

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -22,12 +22,11 @@ function AuthHeader(): JSX.Element {
 				<span className="auth-header-logo-text">SigNoz</span>
 			</div>
 			<Button
-				size="md"
 				className="auth-header-help-button"
 				prefix={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
 				variant="solid"
-				color="secondary"
+				color="none"
 			>
 				Get Help
 			</Button>

frontend/src/components/Badges/Badges.tsx

@@ -48,22 +48,14 @@ function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
 				<Badge
-					variant="solid"
 					key={tag}
-					color="secondary"
+					color="vanilla"
 					style={{ userSelect: 'none' }}
-					suffix={
-						<button
-							type="button"
-							aria-label={`Remove ${tag}`}
-							onClick={(e): void => {
-								e.preventDefault();
-								handleClose(tag);
-							}}
-						>
-							<X size={12} />
-						</button>
-					}
+					closable
+					onClose={(e): void => {
+						e.preventDefault();
+						handleClose(tag);
+					}}
 				>
 					{tag}
 				</Badge>

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -4,7 +4,7 @@ import {
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { BarChart, Info, ScrollText } from '@signozhq/icons';
-import { TooltipProvider, Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
 
 import './CloudServiceDataCollected.styles.scss';
 
@@ -89,10 +89,12 @@ function CloudServiceDataCollected({
 						Metrics
 						{metricsInfoTooltip && (
 							<TooltipProvider>
-								<Tooltip
-									className={'cloud-service-data-collected-table-tooltip'}
+								<TooltipSimple
 									title={metricsInfoTooltip}
 									side="top"
+									tooltipContentProps={{
+										className: 'cloud-service-data-collected-table-tooltip',
+									}}
 								>
 									<span
 										className="cloud-service-data-collected-table-heading-info"
@@ -101,7 +103,7 @@ function CloudServiceDataCollected({
 									>
 										<Info size={12} />
 									</span>
-								</Tooltip>
+								</TooltipSimple>
 							</TooltipProvider>
 						)}
 					</div>

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -2,7 +2,6 @@ import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
 import SyntaxHighlighter, {
 	a11yDark,
 } from 'components/MarkdownRenderer/syntaxHighlighter';
@@ -53,19 +52,16 @@ function CodeBlock({
 			data-testid="code-block-container"
 		>
 			{showCopyButton ? (
-				<Tooltip title={isCopied ? 'Copied' : 'Copy'}>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="sm"
-						icon
-						onClick={handleCopy}
-						aria-label="Copy code"
-						style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
-					>
-						{isCopied ? <Check size={14} /> : <Copy size={14} />}
-					</Button>
-				</Tooltip>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					onClick={handleCopy}
+					prefix={isCopied ? <Check size={14} /> : <Copy size={14} />}
+					aria-label="Copy code"
+					title={isCopied ? 'Copied' : 'Copy'}
+					style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
+				/>
 			) : null}
 			<SyntaxHighlighter
 				style={a11yDark}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -134,33 +134,26 @@ function CreateServiceAccountModal(): JSX.Element {
 
 			<DialogFooter className="create-sa-modal__footer">
 				<Button
-					size="md"
 					type="button"
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
-					testId="create-sa-cancel-btn"
+					data-testid="create-sa-cancel-btn"
 				>
 					<X size={12} />
 					Cancel
 				</Button>
 
 				<AuthZButton
-					size="md"
 					checks={[SACreatePermission]}
 					withPortal={false}
-					type="button"
+					type="submit"
+					form="create-sa-form"
 					variant="solid"
 					color="primary"
 					loading={isSubmitting}
 					disabled={!isValid}
-					testId="create-sa-submit-btn"
-					onClick={(): void => {
-						const form = document.getElementById('create-sa-form');
-						if (form instanceof HTMLFormElement) {
-							form.requestSubmit();
-						}
-					}}
+					data-testid="create-sa-submit-btn"
 				>
 					Create Service Account
 				</AuthZButton>

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -656,19 +656,14 @@ function CustomTimePicker({
 					}
 				>
 					<Button
-						disabledTooltip={undefined}
-						size="md"
 						className="zoom-out-btn"
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
-						testId="zoom-out-btn"
-						icon
-						aria-label="Zoom out"
+						data-testid="zoom-out-btn"
+						prefix={<ZoomOut size={14} />}
 						variant="solid"
-						color="secondary"
-					>
-						<ZoomOut size={14} />
-					</Button>
+						color="none"
+					/>
 				</Tooltip>
 			)}
 		</div>

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -27,14 +27,12 @@ function DetailsHeader({
 	const closeButton = (
 		<Button
 			variant="ghost"
-			size="sm"
-			icon
+			size="icon"
 			color="secondary"
 			onClick={onClose}
 			aria-label="Close"
-		>
-			<X size={14} />
-		</Button>
+			prefix={<X size={14} />}
+		></Button>
 	);
 
 	return (

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Button, Popover, Tooltip } from 'antd';
-import { RadioGroup } from '@signozhq/ui/radio-group';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -68,15 +68,10 @@ export default function DownloadOptionsMenu({
 			>
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup
-						color="primary"
-						value={exportFormat}
-						onChange={setExportFormat}
-						items={[
-							{ value: DownloadFormats.CSV, label: 'csv' },
-							{ value: DownloadFormats.JSONL, label: 'jsonl' },
-						]}
-					/>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={DownloadFormats.CSV}>csv</RadioGroupItem>
+						<RadioGroupItem value={DownloadFormats.JSONL}>jsonl</RadioGroupItem>
+					</RadioGroup>
 				</div>
 
 				<div className="horizontal-line" />
@@ -84,15 +79,19 @@ export default function DownloadOptionsMenu({
 				<div className="row-limit">
 					<Typography.Text className="title">Number of Rows</Typography.Text>
 					<RadioGroup
-						color="primary"
 						value={String(rowLimit)}
 						onChange={(value): void => setRowLimit(Number(value))}
-						items={[
-							{ value: String(DownloadRowCounts.TEN_K), label: '10k' },
-							{ value: String(DownloadRowCounts.THIRTY_K), label: '30k' },
-							{ value: String(DownloadRowCounts.FIFTY_K), label: '50k' },
-						]}
-					/>
+					>
+						<RadioGroupItem value={String(DownloadRowCounts.TEN_K)}>
+							10k
+						</RadioGroupItem>
+						<RadioGroupItem value={String(DownloadRowCounts.THIRTY_K)}>
+							30k
+						</RadioGroupItem>
+						<RadioGroupItem value={String(DownloadRowCounts.FIFTY_K)}>
+							50k
+						</RadioGroupItem>
+					</RadioGroup>
 				</div>
 
 				{dataSource !== DataSource.TRACES && (
@@ -101,15 +100,12 @@ export default function DownloadOptionsMenu({
 
 						<div className="columns-scope">
 							<Typography.Text className="title">Columns</Typography.Text>
-							<RadioGroup
-								color="primary"
-								value={columnsScope}
-								onChange={setColumnsScope}
-								items={[
-									{ value: DownloadColumnsScopes.ALL, label: 'All' },
-									{ value: DownloadColumnsScopes.SELECTED, label: 'Selected' },
-								]}
-							/>
+							<RadioGroup value={columnsScope} onChange={setColumnsScope}>
+								<RadioGroupItem value={DownloadColumnsScopes.ALL}>All</RadioGroupItem>
+								<RadioGroupItem value={DownloadColumnsScopes.SELECTED}>
+									Selected
+								</RadioGroupItem>
+							</RadioGroup>
 						</div>
 					</>
 				)}

frontend/src/components/DropdownMenu/DropdownMenuSimple.tsx

@@ -1,221 +0,0 @@
-import { isValidElement, type ReactElement, type ReactNode } from 'react';
-import {
-	Dropdown,
-	type DropdownItemType,
-	type DropdownProps,
-} from '@signozhq/ui/dropdown';
-
-/**
- * The menu-item shape SigNoz built against `@signozhq/ui/dropdown-menu`.
- * `Dropdown` only accepts its own `items` array, so this module maps the old
- * rows onto that array and renders them.
- */
-export type BaseMenuItem = {
-	key?: string;
-	label?: ReactNode;
-	disabled?: boolean;
-	disabledTooltip?: ReactNode;
-	icon?: ReactNode;
-	rightIcon?: ReactNode;
-	shortcut?: ReactNode;
-	onClick?: (info: { key: string; keyPath: string[] }) => void;
-	danger?: boolean;
-	className?: string;
-};
-
-export type MenuGroup = BaseMenuItem & {
-	type: 'group';
-	label: string;
-	children: MenuItem[];
-};
-
-export type MenuDivider = {
-	type: 'divider';
-	key?: string;
-};
-
-export type SubMenuItem = BaseMenuItem & {
-	children: MenuItem[];
-};
-
-export type CheckboxMenuItem = BaseMenuItem & {
-	type: 'checkbox';
-	key: string;
-	label: ReactNode;
-	checked?: boolean;
-	onCheckedChange?: (checked: boolean) => void;
-};
-
-export type RadioMenuItem = {
-	type: 'radio';
-	key: string;
-	label: ReactNode;
-	value: string;
-	disabled?: boolean;
-	className?: string;
-};
-
-export type RadioGroupMenuItem = {
-	type: 'radio-group';
-	key?: string;
-	value?: string;
-	onChange?: (value: string) => void;
-	children: RadioMenuItem[];
-};
-
-export type MenuItem =
-	| MenuGroup
-	| MenuDivider
-	| CheckboxMenuItem
-	| RadioGroupMenuItem
-	| (SubMenuItem & { type?: never })
-	| (BaseMenuItem & { type?: never; children?: never });
-
-export type MenuProps = {
-	items: MenuItem[];
-	search?: {
-		placeholder?: string;
-		onSearchChange?: (value: string) => void;
-	};
-	loading?: boolean | { text?: string };
-};
-
-type Align = DropdownProps['align'];
-type Side = DropdownProps['side'];
-
-function elementOf(node: ReactNode): ReactElement | undefined {
-	return isValidElement(node) ? node : undefined;
-}
-
-function disabledFields(item: {
-	disabled?: boolean;
-	disabledTooltip?: ReactNode;
-}): { disabled: boolean; disabledTooltip: ReactNode } | Record<string, never> {
-	if (item.disabled === undefined && item.disabledTooltip === undefined) {
-		return {};
-	}
-	return {
-		disabled: Boolean(item.disabled),
-		disabledTooltip: item.disabledTooltip,
-	};
-}
-
-function mapItem(item: MenuItem, index: number): DropdownItemType {
-	if ('type' in item && item.type === 'divider') {
-		return { type: 'separator', value: item.key ?? `separator-${index}` };
-	}
-
-	if ('type' in item && item.type === 'group') {
-		return {
-			type: 'group',
-			value: item.key ?? `group-${index}`,
-			label: item.label,
-			items: item.children.map((child, childIndex) => mapItem(child, childIndex)),
-		} as DropdownItemType;
-	}
-
-	if ('type' in item && item.type === 'checkbox') {
-		return {
-			type: 'checkbox',
-			name: item.key,
-			label: item.label,
-			value: item.checked,
-			onChange: item.onCheckedChange,
-			prefix: elementOf(item.icon),
-			...disabledFields(item),
-		};
-	}
-
-	if ('type' in item && item.type === 'radio-group') {
-		return {
-			type: 'radio-group',
-			name: item.key ?? `radio-${index}`,
-			value: item.value,
-			onChange: item.onChange,
-			items: item.children.map((child) => ({
-				value: child.value,
-				label: child.label,
-				...disabledFields(child),
-			})),
-		};
-	}
-
-	if ('children' in item && item.children) {
-		const key = item.key ?? `submenu-${index}`;
-		return {
-			type: 'submenu',
-			value: key,
-			label: item.label ?? '',
-			prefix: elementOf(item.icon),
-			items: item.children.map((child, childIndex) => mapItem(child, childIndex)),
-			...disabledFields(item),
-		} as DropdownItemType;
-	}
-
-	const key = item.key ?? `item-${index}`;
-	const shortcut = 'shortcut' in item ? item.shortcut : undefined;
-	const suffix = elementOf('rightIcon' in item ? item.rightIcon : undefined);
-	return {
-		type: 'item',
-		value: key,
-		label: item.label ?? '',
-		danger: 'danger' in item ? item.danger : undefined,
-		prefix: elementOf('icon' in item ? item.icon : undefined),
-		...(shortcut != null ? { shortcut } : { suffix }),
-		onClick:
-			'onClick' in item && item.onClick
-				? (): void => {
-						item.onClick?.({ key, keyPath: [key] });
-					}
-				: undefined,
-		...disabledFields(item),
-	};
-}
-
-interface DropdownMenuSimpleProps {
-	menu: MenuProps;
-	children: ReactNode;
-	className?: string;
-	align?: Align;
-	side?: Side;
-	testId?: string;
-	nativeButton?: boolean;
-}
-
-export function DropdownMenuSimple({
-	menu,
-	children,
-	className,
-	align = 'end',
-	side = 'bottom',
-	testId,
-	nativeButton = true,
-}: DropdownMenuSimpleProps): JSX.Element {
-	const loading = menu.loading;
-	const loadingText = typeof loading === 'object' ? loading.text : undefined;
-
-	return (
-		<Dropdown
-			items={menu.items.map(mapItem) as DropdownItemType[]}
-			nativeButton={nativeButton}
-			align={align}
-			side={side}
-			className={className}
-			testId={testId}
-			loading={Boolean(loading)}
-			loadingContent={loadingText}
-			searchInputProps={
-				menu.search
-					? {
-							placeholder: menu.search.placeholder,
-							onChange: menu.search.onSearchChange,
-						}
-					: undefined
-			}
-		>
-			{children}
-		</Dropdown>
-	);
-}
-
-export default DropdownMenuSimple;

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -38,15 +38,13 @@ function DeleteMemberDialog({
 
 	const footer = (
 		<>
-			<Button size="md" variant="solid" color="secondary" onClick={onClose}>
+			<Button variant="solid" color="secondary" onClick={onClose}>
 				<X size={12} />
 				Cancel
 			</Button>
 			<Button
-				disabledTooltip={undefined}
-				size="md"
 				variant="solid"
-				color="danger"
+				color="destructive"
 				disabled={isDeleting}
 				onClick={onConfirm}
 				loading={isDeleting}

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -519,7 +519,7 @@ function EditMemberDrawer({
 									localRoles.map((roleId) => {
 										const role = availableRoles.find((r) => r.id === roleId);
 										return (
-											<Badge variant="solid" key={roleId} color="secondary">
+											<Badge key={roleId} color="vanilla">
 												{role?.name ?? roleId}
 											</Badge>
 										);
@@ -559,15 +559,15 @@ function EditMemberDrawer({
 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">Status</span>
 					{member?.status === MemberStatus.Active ? (
-						<Badge color="success" variant="outlined">
+						<Badge color="forest" variant="outline">
 							ACTIVE
 						</Badge>
 					) : member?.status === MemberStatus.Deleted ? (
-						<Badge color="danger" variant="outlined">
+						<Badge color="cherry" variant="outline">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="warning" variant="outlined">
+						<Badge color="amber" variant="outline">
 							INVITED
 						</Badge>
 					)}
@@ -575,16 +575,12 @@ function EditMemberDrawer({
 
 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-					<Badge variant="solid" color="secondary">
-						{formatTimestamp(member?.joinedOn)}
-					</Badge>
+					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
 				</div>
 				{!isInvited && (
 					<div className="edit-member-drawer__meta-item">
 						<span className="edit-member-drawer__meta-label">Last Modified</span>
-						<Badge variant="solid" color="secondary">
-							{formatTimestamp(member?.updatedAt)}
-						</Badge>
+						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
 					</div>
 				)}
 			</div>
@@ -618,12 +614,10 @@ function EditMemberDrawer({
 						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
 							<span className="edit-member-drawer__tooltip-wrapper">
 								<Button
-									disabledTooltip={undefined}
-									size="md"
 									onClick={(): void => setShowDeleteConfirm(true)}
 									disabled={isRootUser || isSelf}
 									variant="link"
-									color="danger"
+									color="destructive"
 								>
 									<Trash2 size={12} />
 									{isInvited ? 'Revoke Invite' : 'Delete Member'}
@@ -635,8 +629,6 @@ function EditMemberDrawer({
 						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
 							<span className="edit-member-drawer__tooltip-wrapper">
 								<Button
-									disabledTooltip={undefined}
-									size="md"
 									onClick={handleGenerateResetLink}
 									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
 									variant="link"
@@ -659,19 +651,12 @@ function EditMemberDrawer({
 					</div>
 
 					<div className="edit-member-drawer__footer-right">
-						<Button
-							size="md"
-							variant="outlined"
-							color="secondary"
-							onClick={handleClose}
-						>
+						<Button variant="outlined" color="secondary" onClick={handleClose}>
 							<X size={14} />
 							Cancel
 						</Button>
 
 						<Button
-							disabledTooltip={undefined}
-							size="md"
 							variant="solid"
 							color="primary"
 							disabled={!isDirty || isSaving || isRootUser}

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -45,7 +45,6 @@ function ResetLinkDialog({
 						<span className="reset-link-dialog__link-text">{resetLink}</span>
 					</div>
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
 						onClick={onCopy}

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -53,7 +53,7 @@ function ErrorModal({
 					onClick={(): void => setVisible(true)}
 					onKeyDown={undefined}
 				>
-					<Badge variant="solid" color="danger">
+					<Badge color="error">
 						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
 					</Badge>
 				</span>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,10 +1,7 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import {
-	DropdownMenuSimple,
-	type MenuProps,
-} from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';

frontend/src/components/ExportMenu/ExportMenu.tsx

@@ -1,8 +1,8 @@
 import { Download } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import { RadioGroup } from '@signozhq/ui/radio-group';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	ClientExportData,
@@ -51,40 +51,31 @@ export default function ExportMenu({
 
 	return (
 		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-			<Tooltip title="Download">
+			<TooltipSimple title="Download">
 				<PopoverTrigger asChild>
 					<Button
-						disabledTooltip={undefined}
 						variant="ghost"
 						color="secondary"
-						size="sm"
-						icon
+						size="icon"
 						aria-label="Download"
-						testId={`export-menu-${dataSource}`}
+						data-testid={`export-menu-${dataSource}`}
 						disabled={isExporting}
 						loading={isExporting}
 					>
 						<Download size={14} />
 					</Button>
 				</PopoverTrigger>
-			</Tooltip>
+			</TooltipSimple>
 			<PopoverContent align="end" className="export-menu-popover">
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup
-						color="primary"
-						value={exportFormat}
-						onChange={setExportFormat}
-						items={[
-							{ value: ExportFormat.Csv, label: 'csv' },
-							{ value: ExportFormat.Jsonl, label: 'jsonl' },
-						]}
-					/>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
+						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
+					</RadioGroup>
 				</div>
 
 				<Button
-					disabledTooltip={undefined}
-					size="md"
 					variant="solid"
 					color="primary"
 					className="export-button"

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -58,8 +58,8 @@ function SortableField({
 			{!isRequired && (
 				<Button
 					className={cx(styles.removeBtn, 'periscope-btn')}
-					variant="solid"
-					color="danger"
+					variant="outlined"
+					color="destructive"
 					size="sm"
 					onClick={(): void => onRemove(field)}
 				>

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -173,7 +173,6 @@ function FieldsSelectorContent({
 				{hasUnsavedChanges && (
 					<div className={styles.footer}>
 						<Button
-							size="md"
 							variant="outlined"
 							color="secondary"
 							onClick={handleDiscard}
@@ -182,7 +181,6 @@ function FieldsSelectorContent({
 							Discard
 						</Button>
 						<Button
-							size="md"
 							variant="solid"
 							color="primary"
 							onClick={handleSave}

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { Button, Input } from 'antd';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
@@ -102,10 +102,7 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	return (
 		<div className="feedback-modal-container">
 			<div className="feedback-modal-header">
-				<ToggleGroup
-					variant="outlined"
-					color="secondary"
-					size="sm"
+				<ToggleGroupSimple
 					type="single"
 					value={activeTab}
 					className="feedback-modal-tabs"

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
 import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
@@ -113,9 +113,8 @@ function HeaderRightSection({
 						</span>
 					) : null}
 
-					<Tooltip title={NOZ_TOOLTIP_TITLE}>
+					<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 						<Button
-							size="md"
 							variant="solid"
 							color="secondary"
 							className="noz-wave"
@@ -131,7 +130,7 @@ function HeaderRightSection({
 						>
 							<Typography.Text>Noz</Typography.Text>
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 				</div>
 			)}
 
@@ -148,16 +147,13 @@ function HeaderRightSection({
 					onOpenChange={handleOpenFeedbackModalChange}
 				>
 					<Button
-						color="secondary"
 						variant="ghost"
-						size="sm"
-						icon
+						size="icon"
 						className="share-feedback-btn"
 						aria-label="Feedback"
+						prefix={<SquarePen size={14} />}
 						onClick={handleOpenFeedbackModal}
-					>
-						<SquarePen size={14} />
-					</Button>
+					/>
 				</Popover>
 			)}
 
@@ -174,19 +170,16 @@ function HeaderRightSection({
 					onOpenChange={handleOpenAnnouncementsModalChange}
 				>
 					<Button
-						color="secondary"
 						variant="ghost"
-						size="sm"
-						icon
+						size="icon"
 						aria-label="Announcements"
+						prefix={<Inbox size={14} />}
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
 							});
 						}}
-					>
-						<Inbox size={14} />
-					</Button>
+					/>
 				</Popover>
 			)}
 
@@ -203,15 +196,12 @@ function HeaderRightSection({
 					onOpenChange={handleOpenShareURLModalChange}
 				>
 					<Button
-						color="secondary"
 						variant="ghost"
-						size="sm"
-						icon
+						size="icon"
 						aria-label="Share"
+						prefix={<Globe size={14} />}
 						onClick={handleOpenShareURLModal}
-					>
-						<Globe size={14} />
-					</Button>
+					/>
 				</Popover>
 			)}
 		</div>

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -149,9 +149,6 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 								<Info size={14} color={Color.BG_AMBER_600} />
 							)}
 							<Switch
-								color="primary"
-								textPlacement="right"
-								disabledTooltip={undefined}
 								value={enableAbsoluteTime}
 								disabled={!isValidateRelativeTime}
 								onChange={(): void => {
@@ -176,8 +173,6 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 					</Typography.Text>
 					<div className="absolute-relative-time-toggler">
 						<Switch
-							color="primary"
-							textPlacement="right"
 							value={enableExtraOption}
 							onChange={(): void => setEnableExtraOption((prev) => !prev)}
 						/>

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -1,23 +1,14 @@
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 
-function getStatusCodeColor(statusCode: number): BadgeColorType {
-	if (statusCode >= 200 && statusCode < 300) {
-		return 'success';
-	}
-	if (statusCode >= 300 && statusCode < 400) {
-		return 'primary';
-	}
-	if (statusCode >= 400 && statusCode < 500) {
-		return 'warning';
-	}
-	if (statusCode >= 500) {
-		return 'danger';
-	}
-	if (statusCode >= 100 && statusCode < 200) {
-		return 'secondary';
-	}
-	return 'primary';
-}
+type BadgeColor =
+	| 'vanilla'
+	| 'robin'
+	| 'forest'
+	| 'amber'
+	| 'sienna'
+	| 'cherry'
+	| 'sakura'
+	| 'aqua';
 
 interface HttpStatusBadgeProps {
 	statusCode: string | number;
@@ -25,6 +16,25 @@ interface HttpStatusBadgeProps {
 	className?: string;
 }
 
+function getStatusCodeColor(statusCode: number): BadgeColor {
+	if (statusCode >= 200 && statusCode < 300) {
+		return 'forest'; // Success - green
+	}
+	if (statusCode >= 300 && statusCode < 400) {
+		return 'robin'; // Redirect - blue
+	}
+	if (statusCode >= 400 && statusCode < 500) {
+		return 'amber'; // Client error - amber
+	}
+	if (statusCode >= 500) {
+		return 'cherry'; // Server error - red
+	}
+	if (statusCode >= 100 && statusCode < 200) {
+		return 'vanilla'; // Informational - neutral
+	}
+	return 'robin'; // Default fallback
+}
+
 function HttpStatusBadge({
 	statusCode,
 	testId,
@@ -39,7 +49,12 @@ function HttpStatusBadge({
 	const color = getStatusCodeColor(numericStatusCode);
 
 	return (
-		<Badge color={color} variant="outlined" testId={testId} className={className}>
+		<Badge
+			color={color}
+			variant="outline"
+			data-testid={testId}
+			className={className}
+		>
 			{statusCode}
 		</Badge>
 	);

frontend/src/components/InviteMembers/InviteMembers.tsx

@@ -119,12 +119,11 @@ function InviteMembers({
 							<div className={styles.cellAction}>
 								{canRemoveRow && (
 									<Button
-										size="md"
-										variant="solid"
-										color="danger"
+										variant="ghost"
+										color="destructive"
 										onClick={(): void => removeRow(row.id)}
 										aria-label="Remove row"
-										testId={`invite-remove-${row.id}`}
+										data-testid={`invite-remove-${row.id}`}
 									>
 										<Trash2 size={12} />
 									</Button>
@@ -137,12 +136,11 @@ function InviteMembers({
 				{showAddButton && (
 					<div className={styles.addRow}>
 						<Button
-							size="md"
 							variant="dashed"
 							color="secondary"
 							prefix={<Plus size={12} />}
 							onClick={addRow}
-							testId="invite-add-row"
+							data-testid="invite-add-row"
 						>
 							Add another
 						</Button>

frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx

@@ -1,8 +1,8 @@
 import { Button } from '@signozhq/ui/button';
 import { Divider } from '@signozhq/ui/divider';
-import { DropdownMenuSimple as Dropdown } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
 import { toast } from '@signozhq/ui/sonner';
@@ -23,6 +23,8 @@ import { useCopyToClipboard } from 'react-use';
 
 import styles from './LogDetailsHeader.module.scss';
 
+const TOOLTIP_CONTENT_PROPS = { className: styles.tooltipContent };
+
 interface LogDetailsHeaderProps {
 	log: ILog;
 	onNavigatePrev: () => void;
@@ -89,7 +91,6 @@ function LogDetailsHeader({
 			<div className={styles.actions}>
 				{showOpenInExplorer && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<Compass size={16} />}
@@ -103,59 +104,47 @@ function LogDetailsHeader({
 					menu={{ items: menuItems }}
 					align="end"
 					className={styles.dropdownContent}
+					onClick={(e: MouseEvent): void => e.stopPropagation()}
 				>
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
-						icon
-						aria-label="Log actions"
-						testId="log-details-header-menu"
-						onClick={(e: MouseEvent): void => e.stopPropagation()}
-					>
-						<Ellipsis size={16} />
-					</Button>
+						prefix={<Ellipsis size={16} />}
+						data-testid="log-details-header-menu"
+					/>
 				</Dropdown>
 
 				<div className={styles.arrows}>
-					<Tooltip
+					<TooltipSimple
 						title="Move to previous log"
 						side="top"
 						open={isPrevDisabled ? false : undefined}
+						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
-							disabledTooltip={undefined}
-							size="md"
 							variant="outlined"
 							color="secondary"
-							icon
-							aria-label="Move to previous log"
+							prefix={<ChevronUp size={14} />}
 							disabled={isPrevDisabled}
 							onClick={onNavigatePrev}
-							testId="log-details-header-prev"
-						>
-							<ChevronUp size={14} />
-						</Button>
-					</Tooltip>
-					<Tooltip
+							data-testid="log-details-header-prev"
+						/>
+					</TooltipSimple>
+					<TooltipSimple
 						title="Move to next log"
 						side="top"
 						open={isNextDisabled ? false : undefined}
+						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
-							disabledTooltip={undefined}
-							size="md"
 							variant="outlined"
 							color="secondary"
-							icon
-							aria-label="Move to next log"
+							prefix={<ChevronDown size={14} />}
 							disabled={isNextDisabled}
 							onClick={onNavigateNext}
-							testId="log-details-header-next"
-						>
-							<ChevronDown size={14} />
-						</Button>
-					</Tooltip>
+							data-testid="log-details-header-next"
+						/>
+					</TooltipSimple>
 				</div>
 			</div>
 		</div>

frontend/src/components/LogDetail/LogHighlights/config.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge, BadgeColor } from '@signozhq/ui/badge';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { ILog } from 'types/api/logs/log';
@@ -8,13 +8,13 @@ import styles from './LogHighlights.module.scss';
 import TraceIdField from './TraceIdField';
 
 // Severity badge color mirrors the LogStateIndicator bar
-const SEVERITY_COLOR: Record<string, BadgeColorType> = {
-	[LogType.TRACE]: 'success',
-	[LogType.DEBUG]: 'info',
-	[LogType.INFO]: 'primary',
-	[LogType.WARN]: 'warning',
-	[LogType.ERROR]: 'danger',
-	[LogType.FATAL]: 'highlight-danger',
+const SEVERITY_COLOR: Record<string, BadgeColor> = {
+	[LogType.TRACE]: 'forest',
+	[LogType.DEBUG]: 'aqua',
+	[LogType.INFO]: 'robin',
+	[LogType.WARN]: 'amber',
+	[LogType.ERROR]: 'cherry',
+	[LogType.FATAL]: 'sakura',
 };
 
 export interface LogHighlightConfig {
@@ -32,13 +32,9 @@ const getAttr = (log: ILog, key: string): string =>
 
 const valueBadge = (
 	value: string,
-	options?: { prefix?: ReactNode; color?: BadgeColorType },
+	options?: { prefix?: ReactNode; color?: BadgeColor },
 ): ReactNode => (
-	<Badge
-		variant="solid"
-		color={options?.color ?? 'secondary'}
-		className={styles.valueBadge}
-	>
+	<Badge color={options?.color ?? 'vanilla'} className={styles.valueBadge}>
 		{options?.prefix}
 		<span className={styles.badgeText} title={value}>
 			{value}

frontend/src/components/LogDetail/index.tsx

@@ -4,7 +4,7 @@ import { useCopyToClipboard } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
@@ -328,18 +328,13 @@ function LogDetailInner({
 									mouseLeaveDelay={0}
 								>
 									<Button
-										disabledTooltip={undefined}
-										size="md"
 										variant="outlined"
 										color="secondary"
-										icon
-										aria-label="Move to previous log"
+										prefix={<ChevronUp size={14} />}
 										className="log-arrow-btn log-arrow-btn-up"
 										disabled={isPrevDisabled}
 										onClick={goToPrev}
-									>
-										<ChevronUp size={14} />
-									</Button>
+									/>
 								</Tooltip>
 								<Tooltip
 									title={isNextDisabled ? '' : 'Move to next log'}
@@ -347,24 +342,18 @@ function LogDetailInner({
 									mouseLeaveDelay={0}
 								>
 									<Button
-										disabledTooltip={undefined}
-										size="md"
 										variant="outlined"
 										color="secondary"
-										icon
-										aria-label="Move to next log"
+										prefix={<ChevronDown size={14} />}
 										className="log-arrow-btn log-arrow-btn-down"
 										disabled={isNextDisabled}
 										onClick={goToNext}
-									>
-										<ChevronDown size={14} />
-									</Button>
+									/>
 								</Tooltip>
 							</div>
 							{handleOpenInExplorer && (
 								<div>
 									<Button
-										size="md"
 										variant="outlined"
 										color="secondary"
 										prefix={<Compass size={16} />}
@@ -421,10 +410,7 @@ function LogDetailInner({
 				{isLogDetailsV2 && <div className="log-detail-drawer__section-divider" />}
 
 				<div className="tabs-and-search">
-					<ToggleGroup
-						variant="outlined"
-						color="secondary"
-						size="sm"
+					<ToggleGroupSimple
 						type="single"
 						className="views-tabs"
 						onChange={handleModeChange}
@@ -487,12 +473,9 @@ function LogDetailInner({
 									variant="link"
 									color="secondary"
 									size="sm"
-									icon
-									aria-label="Show Filters"
+									prefix={<Filter size="lg" />}
 									onClick={handleFilterVisible}
-								>
-									<Filter size="lg" />
-								</Button>
+								/>
 							</Tooltip>
 						)}
 
@@ -510,14 +493,9 @@ function LogDetailInner({
 									variant="link"
 									color="secondary"
 									size="sm"
-									icon
-									aria-label={
-										selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-									}
+									prefix={<Copy size={12} />}
 									onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
-								>
-									<Copy size={12} />
-								</Button>
+								/>
 							</Tooltip>
 						)}
 					</div>

frontend/src/components/MarkdownEditor/EditorToolbar.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import {
 	Bold,
 	CodeXml,
@@ -11,7 +11,7 @@ import {
 	Type,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 
 import InsertVariableMenu from './InsertVariableMenu';
@@ -20,7 +20,7 @@ import type { EditorCommand, EditorVariable } from './types';
 
 import styles from './MarkdownEditor.module.scss';
 
-const COMMAND_ICONS: Record<string, ReactElement> = {
+const COMMAND_ICONS: Record<string, ReactNode> = {
 	heading: <Heading size={14} />,
 	bold: <Bold size={14} />,
 	italic: <Italic size={14} />,
@@ -61,22 +61,20 @@ function EditorToolbar({
 			<span className={styles.toolbarDivider} />
 			<div className={styles.commands}>
 				{commands.map((command) => (
-					<Tooltip key={command.id} title={command.label}>
+					<TooltipSimple key={command.id} title={command.label}>
 						<Button
-							disabledTooltip={undefined}
 							type="button"
 							variant="ghost"
 							color="secondary"
-							size="sm"
-							icon
+							size="icon"
 							disabled={disabled}
 							aria-label={command.label}
-							testId={`markdown-command-${command.id}`}
+							data-testid={`markdown-command-${command.id}`}
 							onClick={(): void => onRunCommand(command)}
 						>
 							{COMMAND_ICONS[command.id]}
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 				))}
 			</div>
 			<div className={styles.toolbarEnd}>

frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx

@@ -1,10 +1,7 @@
 import { useMemo, useState } from 'react';
-import { ChevronDown, DollarSign } from '@signozhq/icons';
+import { ChevronDown, DollarSign, Search } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import {
-	DropdownMenuSimple,
-	type MenuItem,
-} from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 
 import type { EditorVariable } from './types';
 
@@ -69,12 +66,12 @@ function InsertVariableMenu({
 				items,
 				search: {
 					placeholder: 'Search variables',
+					searchIcon: <Search size={14} />,
 					onSearchChange: setSearch,
 				},
 			}}
 		>
 			<Button
-				disabledTooltip={undefined}
 				type="button"
 				variant="outlined"
 				color="secondary"
@@ -83,7 +80,7 @@ function InsertVariableMenu({
 				prefix={<DollarSign size={14} className={styles.insertVariableIcon} />}
 				suffix={<ChevronDown size={14} />}
 				className={styles.insertVariable}
-				testId="markdown-insert-variable"
+				data-testid="markdown-insert-variable"
 			>
 				Insert variable
 			</Button>

frontend/src/components/MarkdownEditor/MarkdownHelp.tsx

@@ -15,10 +15,9 @@ function MarkdownHelp(): JSX.Element {
 					type="button"
 					variant="ghost"
 					color="secondary"
-					size="sm"
-					icon
+					size="icon"
 					aria-label="Markdown syntax help"
-					testId="markdown-help-trigger"
+					data-testid="markdown-help-trigger"
 				>
 					<CircleHelp size={14} />
 				</Button>

frontend/src/components/MembersTable/MembersTable.tsx

@@ -55,14 +55,14 @@ function NameEmailCell({
 function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
 	if (status === MemberStatus.Active) {
 		return (
-			<Badge color="success" variant="outlined">
+			<Badge color="forest" variant="outline">
 				ACTIVE
 			</Badge>
 		);
 	}
 	if (status === MemberStatus.Deleted) {
 		return (
-			<Badge color="danger" variant="outlined">
+			<Badge color="cherry" variant="outline">
 				DELETED
 			</Badge>
 		);
@@ -70,17 +70,13 @@ function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
 
 	if (status === MemberStatus.Invited) {
 		return (
-			<Badge color="warning" variant="outlined">
+			<Badge color="amber" variant="outline">
 				INVITED
 			</Badge>
 		);
 	}
 
-	return (
-		<Badge variant="solid" color="secondary">
-			⎯
-		</Badge>
-	);
+	return <Badge color="vanilla">⎯</Badge>;
 }
 
 function MembersEmptyState({

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -20,7 +20,7 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Button, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
-import { TooltipProvider, Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
@@ -758,14 +758,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					tabIndex={isActive ? 0 : -1}
 				>
 					<Checkbox
-						color="primary"
 						value={isSelected}
 						className="option-checkbox"
-						onChange={(): void => {
-							handleItemSelection('checkbox');
-							setActiveChipIndex(-1);
-							setActiveIndex(-1);
-						}}
+						onClick={(e): void => selectFromButton(e, 'checkbox')}
 					>
 						<div className="option-content">
 							<Typography.Text truncate={1} className="option-label-text">
@@ -1600,11 +1595,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 						>
 							<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-								<Checkbox
-									color="primary"
-									value={allOptionsSelected}
-									className="option-checkbox"
-								>
+								<Checkbox value={allOptionsSelected} className="option-checkbox">
 									<div className="option-content">
 										<div className="all-option-text">ALL</div>
 									</div>
@@ -1982,9 +1973,13 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				// `label` arrives already cut to maxTagTextLength, so the reveal reads the
 				// option's own text (falling back to the raw value for freeform tags).
 				return (
-					<Tooltip side="top" title={findOptionLabelText(options, value)}>
+					<TooltipSimple
+						side="top"
+						delayDuration={300}
+						title={findOptionLabelText(options, value)}
+					>
 						{tag}
-					</Tooltip>
+					</TooltipSimple>
 				);
 			}
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
@@ -562,10 +562,7 @@ function QueryAddOns({
 				</div>
 			)}
 
-			<ToggleGroup
-				variant="outlined"
-				color="secondary"
-				size="sm"
+			<ToggleGroupSimple
 				type="multiple"
 				className="add-ons-tabs"
 				value={selectedViews.map((view) => view.key)}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -724,62 +724,26 @@ function QuerySearch({
 	// Helper function to render a badge for the current context mode
 	const renderContextBadge = (): JSX.Element => {
 		if (!editingMode) {
-			return (
-				<Badge variant="solid" color="secondary">
-					Unknown
-				</Badge>
-			);
+			return <Badge color="vanilla">Unknown</Badge>;
 		}
 
 		switch (editingMode) {
 			case 'key':
-				return (
-					<Badge variant="solid" color="primary">
-						Key
-					</Badge>
-				);
+				return <Badge color="robin">Key</Badge>;
 			case 'operator':
-				return (
-					<Badge variant="solid" color="highlight-danger">
-						Operator
-					</Badge>
-				);
+				return <Badge color="sakura">Operator</Badge>;
 			case 'value':
-				return (
-					<Badge variant="solid" color="success">
-						Value
-					</Badge>
-				);
+				return <Badge color="forest">Value</Badge>;
 			case 'conjunction':
-				return (
-					<Badge variant="solid" color="warning">
-						Conjunction
-					</Badge>
-				);
+				return <Badge color="amber">Conjunction</Badge>;
 			case 'function':
-				return (
-					<Badge variant="solid" color="info">
-						Function
-					</Badge>
-				);
+				return <Badge color="aqua">Function</Badge>;
 			case 'parenthesis':
-				return (
-					<Badge variant="solid" color="highlight-danger">
-						Parenthesis
-					</Badge>
-				);
+				return <Badge color="sakura">Parenthesis</Badge>;
 			case 'bracketList':
-				return (
-					<Badge variant="solid" color="danger">
-						Bracket List
-					</Badge>
-				);
+				return <Badge color="cherry">Bracket List</Badge>;
 			default:
-				return (
-					<Badge variant="solid" color="secondary">
-						Unknown
-					</Badge>
-				);
+				return <Badge color="vanilla">Unknown</Badge>;
 		}
 	};
 
@@ -1501,44 +1465,27 @@ function QuerySearch({
 					Currently editing: {renderContextBadge()}
 					{queryContext?.keyToken && (
 						<span className="triplet-info">
-							Key:{' '}
-							<Badge variant="solid" color="secondary">
-								{queryContext.keyToken}
-							</Badge>
+							Key: <Badge color="vanilla">{queryContext.keyToken}</Badge>
 						</span>
 					)}
 					{queryContext?.operatorToken && (
 						<span className="triplet-info">
-							Operator:{' '}
-							<Badge variant="solid" color="secondary">
-								{queryContext.operatorToken}
-							</Badge>
+							Operator: <Badge color="vanilla">{queryContext.operatorToken}</Badge>
 						</span>
 					)}
 					{queryContext?.valueToken && (
 						<span className="triplet-info">
-							Value:{' '}
-							<Badge variant="solid" color="secondary">
-								{queryContext.valueToken}
-							</Badge>
+							Value: <Badge color="vanilla">{queryContext.valueToken}</Badge>
 						</span>
 					)}
 					{queryContext?.currentPair && (
 						<span className="triplet-info query-pair-info">
-							Current pair:{' '}
-							<Badge variant="solid" color="primary">
-								{queryContext.currentPair.key}
-							</Badge>
-							<Badge variant="solid" color="highlight-danger">
-								{queryContext.currentPair.operator}
-							</Badge>
+							Current pair: <Badge color="robin">{queryContext.currentPair.key}</Badge>
+							<Badge color="sakura">{queryContext.currentPair.operator}</Badge>
 							{queryContext.currentPair.value && (
-								<Badge variant="solid" color="success">
-									{queryContext.currentPair.value}
-								</Badge>
+								<Badge color="forest">{queryContext.currentPair.value}</Badge>
 							)}
 							<Badge
-								variant="solid"
 								color={queryContext.currentPair.isComplete ? 'success' : 'warning'}
 							>
 								{queryContext.currentPair.isComplete ? 'Complete' : 'Incomplete'}
@@ -1548,9 +1495,7 @@ function QuerySearch({
 					{queryContext?.queryPairs && queryContext.queryPairs.length > 0 && (
 						<span className="triplet-info">
 							Total pairs:{' '}
-							<Badge variant="solid" color="primary">
-								{queryContext.queryPairs.length}
-							</Badge>
+							<Badge color="robin">{queryContext.queryPairs.length}</Badge>
 						</span>
 					)}
 				</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { DropdownMenuSimple } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx

@@ -2,7 +2,7 @@ import { Button } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 interface CheckboxValueRowProps {
 	value: string;
@@ -28,8 +28,6 @@ function CheckboxValueRow({
 	return (
 		<div className="value">
 			<Checkbox
-				color="primary"
-				disabledTooltip={undefined}
 				onChange={(isChecked): void => onCheckboxChange(isChecked === true)}
 				value={checked}
 				disabled={disabled}
@@ -49,11 +47,11 @@ function CheckboxValueRow({
 				{customRendererForValue ? (
 					customRendererForValue(value)
 				) : (
-					<Tooltip title={String(value)} side="top" align="start">
+					<TooltipSimple title={String(value)} side="top" align="start">
 						<Typography.Text className="value-string" truncate={1}>
 							{String(value)}
 						</Typography.Text>
-					</Tooltip>
+					</TooltipSimple>
 				)}
 				<div className="value-actions">
 					<Button type="text" className="only-btn">

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { ChevronDown, ChevronRight, Search, Undo2 } from '@signozhq/icons';
 
@@ -63,7 +63,9 @@ export function CheckboxFilterV2Header({
 					<ChevronRight size={13} cursor="pointer" />
 				)}
 				{isTitleTruncated ? (
-					<Tooltip title={title}>{titleText}</Tooltip>
+					<TooltipSimple title={title} delayDuration={400}>
+						{titleText}
+					</TooltipSimple>
 				) : (
 					titleText
 				)}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.tsx

@@ -54,7 +54,6 @@ export function CheckboxFilterV2ValueRow({
 		>
 			<div className={styles.checkbox}>
 				<Checkbox
-					disabledTooltip={undefined}
 					onChange={(isChecked): void =>
 						onCheckboxChange(isChecked === true, checkedState)
 					}
@@ -98,7 +97,7 @@ export function CheckboxFilterV2ValueRow({
 				<div className={styles.actions}>
 					{badge && (
 						<Badge
-							variant="outlined"
+							variant="outline"
 							color={badge.color}
 							className={styles.badge}
 							testId={`badge-${badge.key}`}
@@ -106,20 +105,10 @@ export function CheckboxFilterV2ValueRow({
 							{badge.label}
 						</Badge>
 					)}
-					<Button
-						size="md"
-						variant="ghost"
-						color="secondary"
-						className={styles.onlyButton}
-					>
+					<Button variant="ghost" color="secondary" className={styles.onlyButton}>
 						{onlyButtonLabel}
 					</Button>
-					<Button
-						size="md"
-						variant="ghost"
-						color="secondary"
-						className={styles.toggleButton}
-					>
+					<Button variant="ghost" color="secondary" className={styles.toggleButton}>
 						Toggle
 					</Button>
 				</div>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2ValueRow.test.tsx

@@ -64,7 +64,7 @@ describe('CheckboxFilterV2ValueRow', () => {
 			render(
 				<CheckboxFilterV2ValueRow
 					{...defaultProps}
-					badge={{ key: 'related', label: 'Related', color: 'primary' }}
+					badge={{ key: 'related', label: 'Related', color: 'robin' }}
 				/>,
 			);
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts

@@ -9,7 +9,7 @@ export enum SectionType {
 export interface BadgeConfig {
 	key: string;
 	label: string;
-	color: 'primary' | 'warning' | 'secondary';
+	color: 'robin' | 'warning' | 'secondary';
 }
 
 export interface ItemConfig {

frontend/src/components/QuickFilters/FilterRenderers/shared/SectionActionButton/SectionActionButton.tsx

@@ -23,22 +23,21 @@ export function SectionActionButton({
 }: SectionActionButtonProps): JSX.Element {
 	return (
 		<Tooltip title={tooltip}>
-			<span onMouseDown={(e): void => e.preventDefault()}>
-				<Button
-					variant="link"
-					color="secondary"
-					size="sm"
-					className={classNames(styles.iconBtn, className)}
-					onClick={(e): void => {
-						e.stopPropagation();
-						e.preventDefault();
-						onClick();
-					}}
-					testId={testId}
-				>
-					{icon}
-				</Button>
-			</span>
+			<Button
+				variant="link"
+				color="secondary"
+				size="sm"
+				className={classNames(styles.iconBtn, className)}
+				onMouseDown={(e): void => e.preventDefault()}
+				onClick={(e): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					onClick();
+				}}
+				data-testid={testId}
+			>
+				{icon}
+			</Button>
 		</Tooltip>
 	);
 }

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -232,55 +232,48 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		<section className="right-actions">
 			<Tooltip title="Reset All">
 				<Button
-					size="md"
 					variant="link"
 					color="secondary"
-					icon
 					aria-label="Reset All"
 					className="right-action-icon-container"
 					onClick={handleReset}
-				>
-					<RefreshCw className="sync-icon" size="md" />
-				</Button>
+					prefix={<RefreshCw className="sync-icon" size="md" />}
+				/>
 			</Tooltip>
 			{showFilterCollapse && (
 				<Tooltip title="Collapse Filters">
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
-						icon
 						aria-label="Collapse Filters"
 						className="right-action-icon-container"
 						onClick={handleFilterVisibilityChange}
-					>
-						<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />
-					</Button>
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
+					/>
 				</Tooltip>
 			)}
 			{isDynamicFilters && (
 				<AuthZButton
-					size="md"
 					checks={QuickFilterManagePermissions}
 					variant="link"
 					color="secondary"
-					icon
 					aria-label="Settings"
 					className={classNames('right-action-icon-container', {
 						active: isSettingsOpen,
 					})}
 					onClick={(): void => setIsSettingsOpen(true)}
 					testId="settings-icon-container"
-				>
-					<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
-						<SettingsIcon
-							className="settings-icon"
-							data-testid="settings-icon"
-							width={14}
-							height={14}
-						/>
-					</Tooltip>
-				</AuthZButton>
+					prefix={
+						<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
+							<SettingsIcon
+								className="settings-icon"
+								data-testid="settings-icon"
+								width={14}
+								height={14}
+							/>
+						</Tooltip>
+					}
+				/>
 			)}
 		</section>
 	);
@@ -291,8 +284,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				<div className="api-quick-filters-header">
 					<Typography.Text>Show IP addresses</Typography.Text>
 					<Switch
-						color="primary"
-						textPlacement="right"
 						style={{ marginLeft: 'auto' }}
 						value={showIP ?? true}
 						onChange={(checked): void => {

frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/index.tsx

@@ -61,7 +61,6 @@ function AnnouncementTooltip({
 				<p className="announcement-tooltip__message">{message}</p>
 				<div className="announcement-tooltip__footer">
 					<Button
-						size="md"
 						variant="solid"
 						color="primary"
 						onClick={closeTooltip}

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { refreshLicense } from 'api/generated/services/licenses';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { buildLicenseUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/license.permissions';
@@ -49,7 +49,7 @@ function RefreshPaymentStatus({
 		>
 			<Button
 				variant="link"
-				color="secondary"
+				color={type === 'text' ? 'none' : 'secondary'}
 				size="md"
 				className={className}
 				onClick={handleRefreshPaymentStatus}
@@ -64,7 +64,7 @@ function RefreshPaymentStatus({
 	return (
 		<span className="refresh-payment-status-btn-wrapper">
 			{type === 'tooltip' ? (
-				<Tooltip title={t('refreshPaymentStatus')}>{button}</Tooltip>
+				<TooltipSimple title={t('refreshPaymentStatus')}>{button}</TooltipSimple>
 			) : (
 				button
 			)}

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -5,10 +5,7 @@ import type {
 	TableColumnType as ColumnType,
 } from 'antd';
 import { Button, Flex } from 'antd';
-import {
-	DropdownMenuSimple,
-	type MenuItem,
-} from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
@@ -98,8 +95,6 @@ function DynamicColumnTable({
 				>
 					<div>{column.title?.toString()}</div>
 					<Switch
-						color="primary"
-						textPlacement="right"
 						value={columnsData?.findIndex((c) => c.key === column.key) !== -1}
 						onChange={onToggleHandler(index, column)}
 					/>

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -152,7 +152,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 				optionFilterProp="label"
 				optionRender={(option): JSX.Element => (
 					<div style={{ pointerEvents: 'none' }}>
-						<Checkbox color="primary" value={value.includes(option.value as string)}>
+						<Checkbox value={value.includes(option.value as string)}>
 							{option.label}
 						</Checkbox>
 					</div>

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -24,7 +24,6 @@ function KeyCreatedPhase({
 				<div className="add-key-modal__key-display">
 					<span className="add-key-modal__key-text">{createdKey.key}</span>
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
 						onClick={onCopy}
@@ -37,9 +36,7 @@ function KeyCreatedPhase({
 
 			<div className="add-key-modal__expiry-meta">
 				<span className="add-key-modal__expiry-label">Expiration</span>
-				<Badge variant="solid" color="secondary">
-					{expiryLabel}
-				</Badge>
+				<Badge color="vanilla">{expiryLabel}</Badge>
 			</div>
 
 			<div className="add-key-modal__callout-wrapper">

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -2,7 +2,7 @@ import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
@@ -68,9 +68,7 @@ function KeyFormPhase({
 								name="expiryMode"
 								control={control}
 								render={({ field }): JSX.Element => (
-									<ToggleGroup
-										variant="outlined"
-										color="secondary"
+									<ToggleGroupSimple
 										type="single"
 										value={field.value}
 										onChange={(val: string): void => {
@@ -119,7 +117,6 @@ function KeyFormPhase({
 			<div className="add-key-modal__footer">
 				<div className="add-key-modal__footer-right">
 					<Button
-						size="md"
 						variant="solid"
 						color="secondary"
 						onClick={onClose}
@@ -128,22 +125,16 @@ function KeyFormPhase({
 						Cancel
 					</Button>
 					<AuthZButton
-						size="md"
 						checks={checks}
 						authZEnabled={!!accountId}
 						withPortal={false}
-						type="button"
+						type="submit"
+						form={FORM_ID}
 						variant="solid"
 						color="primary"
 						loading={isSubmitting}
 						disabled={!isValid}
 						testId="add-key-submit-btn"
-						onClick={(): void => {
-							const form = document.getElementById(FORM_ID);
-							if (form instanceof HTMLFormElement) {
-								form.requestSubmit();
-							}
-						}}
 					>
 						Create Key
 					</AuthZButton>

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -80,16 +80,15 @@ function DeleteAccountModal(): JSX.Element {
 
 	const footer = (
 		<div className="sa-delete-dialog__footer">
-			<Button size="md" variant="solid" color="secondary" onClick={handleCancel}>
+			<Button variant="solid" color="secondary" onClick={handleCancel}>
 				<X size={12} />
 				Cancel
 			</Button>
 			<AuthZButton
-				size="md"
 				checks={[buildSADeletePermission(accountId ?? '')]}
 				authZEnabled={!!accountId}
 				variant="solid"
-				color="danger"
+				color="destructive"
 				loading={isDeleting}
 				onClick={handleConfirm}
 				data-testid="confirm-delete-btn"

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -4,7 +4,7 @@ import { LockKeyhole, Trash2, X } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
@@ -103,9 +103,7 @@ function EditKeyForm({
 						name="expiryMode"
 						control={control}
 						render={({ field }): JSX.Element => (
-							<ToggleGroup
-								variant="outlined"
-								color="secondary"
+							<ToggleGroupSimple
 								type="single"
 								value={field.value}
 								onChange={(val: string): void => {
@@ -115,9 +113,6 @@ function EditKeyForm({
 								}}
 								size="sm"
 								disabled={!canUpdate}
-								disabledTooltip={
-									canUpdate ? undefined : 'You do not have permission to update this key'
-								}
 								className="edit-key-modal__expiry-toggle"
 								items={[
 									{ value: ExpiryMode.NONE, label: 'No Expiration' },
@@ -155,7 +150,7 @@ function EditKeyForm({
 
 				<div className="edit-key-modal__meta">
 					<span className="edit-key-modal__meta-label">Last Observed At</span>
-					<Badge variant="solid" color="secondary">
+					<Badge color="vanilla">
 						{formatLastObservedAt(
 							keyItem?.lastObservedAt ?? null,
 							formatTimezoneAdjustedTimestamp,
@@ -166,14 +161,13 @@ function EditKeyForm({
 
 			<div className="edit-key-modal__footer">
 				<AuthZButton
-					size="md"
 					checks={[
 						buildAPIKeyDeletePermission(keyItem?.id ?? ''),
 						buildSADetachPermission(accountId ?? ''),
 					]}
 					authZEnabled={!!accountId && !!keyItem?.id}
 					variant="link"
-					color="danger"
+					color="destructive"
 					onClick={onRevokeClick}
 					withPortal={false}
 				>
@@ -181,26 +175,20 @@ function EditKeyForm({
 					Revoke Key
 				</AuthZButton>
 				<div className="edit-key-modal__footer-right">
-					<Button size="md" variant="solid" color="secondary" onClick={onClose}>
+					<Button variant="solid" color="secondary" onClick={onClose}>
 						<X size={12} />
 						Cancel
 					</Button>
 					<AuthZButton
-						size="md"
 						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
 						authZEnabled={!!accountId && !!keyItem?.id}
-						type="button"
+						type="submit"
+						form={FORM_ID}
 						variant="solid"
 						color="primary"
 						loading={isSaving}
 						disabled={!isDirty}
 						withPortal={false}
-						onClick={(): void => {
-							const form = document.getElementById(FORM_ID);
-							if (form instanceof HTMLFormElement) {
-								form.requestSubmit();
-							}
-						}}
 					>
 						Save Changes
 					</AuthZButton>

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -122,11 +122,9 @@ function buildColumns({
 							]}
 							authZEnabled={!isDisabled && !!accountId}
 							withPortal={false}
-							variant="solid"
+							variant="ghost"
 							size="sm"
-							color="danger"
-							icon
-							aria-label="Revoke Key"
+							color="destructive"
 							disabled={isDisabled}
 							onClick={(e): void => {
 								e.stopPropagation();
@@ -215,7 +213,6 @@ function KeysTab({
 					</a>
 				</p>
 				<AuthZButton
-					size="md"
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
 					authZEnabled={!isDisabled && !!accountId}
 					withPortal={false}

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -122,12 +122,11 @@ function OverviewTab({
 					<span className="sa-drawer__input-text">{account.id || '—'}</span>
 					{account.id && (
 						<Button
-							size="md"
 							variant="link"
 							color="secondary"
 							onClick={handleCopyId}
 							className="sa-drawer__copy-btn"
-							testId="copy-id-btn"
+							data-testid="copy-id-btn"
 						>
 							{hasCopiedId ? <Check size={14} /> : <Copy size={14} />}
 						</Button>
@@ -157,7 +156,7 @@ function OverviewTab({
 								localRoles.map((roleId) => {
 									const role = availableRoles.find((r) => r.id === roleId);
 									return (
-										<Badge variant="solid" key={roleId} color="secondary">
+										<Badge key={roleId} color="vanilla">
 											{role?.name ?? roleId}
 										</Badge>
 									);
@@ -188,15 +187,15 @@ function OverviewTab({
 				<div className="sa-drawer__meta-item">
 					<span className="sa-drawer__meta-label">Status</span>
 					{account.status?.toUpperCase() === 'ACTIVE' ? (
-						<Badge color="success" variant="outlined">
+						<Badge color="forest" variant="outline">
 							ACTIVE
 						</Badge>
 					) : account.status?.toUpperCase() === 'DELETED' ? (
-						<Badge color="danger" variant="outlined">
+						<Badge color="cherry" variant="outline">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="secondary" variant="outlined" className="sa-status-badge">
+						<Badge color="vanilla" variant="outline" className="sa-status-badge">
 							{account.status ? account.status.toUpperCase() : 'UNKNOWN'}
 						</Badge>
 					)}
@@ -204,16 +203,12 @@ function OverviewTab({
 
 				<div className="sa-drawer__meta-item">
 					<span className="sa-drawer__meta-label">Created At</span>
-					<Badge variant="solid" color="secondary">
-						{formatTimestamp(account.createdAt)}
-					</Badge>
+					<Badge color="vanilla">{formatTimestamp(account.createdAt)}</Badge>
 				</div>
 
 				<div className="sa-drawer__meta-item">
 					<span className="sa-drawer__meta-label">Updated At</span>
-					<Badge variant="solid" color="secondary">
-						{formatTimestamp(account.updatedAt)}
-					</Badge>
+					<Badge color="vanilla">{formatTimestamp(account.updatedAt)}</Badge>
 				</div>
 			</div>
 

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -41,19 +41,18 @@ export function RevokeKeyFooter({
 }: RevokeKeyFooterProps): JSX.Element {
 	return (
 		<>
-			<Button size="md" variant="solid" color="secondary" onClick={onCancel}>
+			<Button variant="solid" color="secondary" onClick={onCancel}>
 				<X size={12} />
 				Cancel
 			</Button>
 			<AuthZButton
-				size="md"
 				checks={[
 					buildAPIKeyDeletePermission(keyId ?? ''),
 					buildSADetachPermission(accountId ?? ''),
 				]}
 				authZEnabled={!!accountId && !!keyId}
 				variant="solid"
-				color="danger"
+				color="destructive"
 				loading={isRevoking}
 				onClick={onConfirm}
 				withPortal={false}

frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx

@@ -40,9 +40,8 @@ function SaveErrorItem({
 				</span>
 				{onRetry && !isRetrying && (
 					<Button
-						size="md"
 						variant="link"
-						color="secondary"
+						color="none"
 						aria-label="Retry"
 						onClick={async (e): Promise<void> => {
 							e.stopPropagation();

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -10,7 +10,7 @@ import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -375,12 +375,11 @@ function ServiceAccountDrawer({
 			activeTab === ServiceAccountDrawerTab.Overview && !isDeleted && open ? (
 				<div className="sa-drawer__footer">
 					<AuthZButton
-						size="md"
 						checks={[buildSADeletePermission(selectedAccountId ?? '')]}
 						authZEnabled={!!selectedAccountId}
 						withPortal={false}
 						variant="link"
-						color="danger"
+						color="destructive"
 						onClick={(): void => {
 							void setIsDeleteOpen(true);
 						}}
@@ -389,17 +388,11 @@ function ServiceAccountDrawer({
 						Delete Service Account
 					</AuthZButton>
 					<div className="sa-drawer__footer-right">
-						<Button
-							size="md"
-							variant="outlined"
-							color="secondary"
-							onClick={handleClose}
-						>
+						<Button variant="outlined" color="secondary" onClick={handleClose}>
 							<X size={14} />
 							Cancel
 						</Button>
 						<AuthZButton
-							size="md"
 							checks={[
 								buildSAReadPermission(selectedAccountId ?? ''),
 								buildSAUpdatePermission(selectedAccountId ?? ''),
@@ -433,9 +426,7 @@ function ServiceAccountDrawer({
 	const body = (
 		<div className="sa-drawer__layout">
 			<div className="sa-drawer__tabs">
-				<ToggleGroup
-					variant="outlined"
-					color="secondary"
+				<ToggleGroupSimple
 					type="single"
 					value={activeTab}
 					size="sm"

frontend/src/components/ServiceAccountsTable/utils.tsx

@@ -28,20 +28,20 @@ export function NameEmailCell({
 export function StatusBadge({ status }: { status: string }): JSX.Element {
 	if (status?.toUpperCase() === 'ACTIVE') {
 		return (
-			<Badge color="success" variant="outlined">
+			<Badge color="forest" variant="outline">
 				ACTIVE
 			</Badge>
 		);
 	}
 	if (status?.toUpperCase() === 'DELETED') {
 		return (
-			<Badge color="danger" variant="outlined">
+			<Badge color="cherry" variant="outline">
 				DELETED
 			</Badge>
 		);
 	}
 	return (
-		<Badge color="secondary" variant="outlined" className="sa-status-badge">
+		<Badge color="vanilla" variant="outline" className="sa-status-badge">
 			{status ? status.toUpperCase() : 'UNKNOWN'}
 		</Badge>
 	);

frontend/src/components/SignozModal/stories/SignozModal.stories.tsx

@@ -13,13 +13,7 @@ function ModalFixture(): JSX.Element {
 
 	return (
 		<>
-			<Button
-				size="md"
-				variant="solid"
-				color="primary"
-				testId="open-signoz-modal"
-				onClick={(): void => setOpen(true)}
-			>
+			<Button data-testid="open-signoz-modal" onClick={(): void => setOpen(true)}>
 				Open modal
 			</Button>
 			<SignozModal

frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 
 import './SignozRadioGroup.styles.scss';
 
@@ -24,16 +24,12 @@ function SignozRadioGroup({
 	disabled = false,
 }: SignozRadioGroupProps): JSX.Element {
 	return (
-		<ToggleGroup
-			variant="outlined"
-			color="secondary"
-			size="sm"
+		<ToggleGroupSimple
 			type="single"
 			value={value}
 			className={`signoz-radio-group ${className}`}
 			onChange={onChange}
 			disabled={disabled}
-			disabledTooltip={undefined}
 			items={options.map((option) => ({
 				value: option.value,
 				label: (

frontend/src/components/TableRenderer/BadgeWithTooltip.tsx

@@ -12,7 +12,7 @@ function BadgeWithTooltip({
 	return (
 		<div key={label}>
 			<Tooltip title={tooltipTitle}>
-				<Badge variant="solid" className="label-column--tag" color="secondary">
+				<Badge className="label-column--tag" color="vanilla">
 					{getLabelRenderingValue(label, value && value[label])}
 				</Badge>
 			</Tooltip>

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -27,11 +27,7 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 							{labels.map(
 								(label: string): JSX.Element => (
 									<div key={label}>
-										<Badge
-											variant="solid"
-											className="label-column--tag"
-											color="secondary"
-										>
+										<Badge className="label-column--tag" color="vanilla">
 											{getLabelAndValueContent(label, value && value[label])}
 										</Badge>
 									</div>
@@ -41,7 +37,7 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 					}
 					trigger="hover"
 				>
-					<Badge variant="solid" className="label-column--tag" color="secondary">
+					<Badge className="label-column--tag" color="vanilla">
 						+{remainingLabels.length}
 					</Badge>
 				</Popover>

frontend/src/components/TagBadge/TagBadge.tsx

@@ -1,5 +1,4 @@
 import { type MouseEvent, type ReactNode } from 'react';
-import { X } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import cx from 'classnames';
 
@@ -24,22 +23,11 @@ function TagBadge({
 }: TagBadgeProps): JSX.Element {
 	return (
 		<Badge
-			color="archive"
-			variant="outlined"
+			color="sienna"
+			variant="outline"
 			className={cx(styles.static, className)}
-			suffix={
-				closable ? (
-					<button
-						type="button"
-						aria-label="Remove"
-						onClick={(event): void => {
-							onClose?.(event);
-						}}
-					>
-						<X size={12} />
-					</button>
-				) : undefined
-			}
+			closable={closable}
+			onClose={onClose}
 		>
 			{children}
 		</Badge>

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -1,6 +1,5 @@
 import { type ChangeEvent, type KeyboardEvent, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
 import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
@@ -139,18 +138,16 @@ function TagKeyValueInput({
 							closable
 							onClose={(): void => removeTag(tag)}
 						>
-							<Tooltip title="Double-click to edit">
-								<Button
-									size="md"
-									variant="ghost"
-									color="secondary"
-									className={styles.tagLabel}
-									testId={`${testId}-chip`}
-									onDoubleClick={(): void => startEdit(index)}
-								>
-									{tag}
-								</Button>
-							</Tooltip>
+							<Button
+								variant="ghost"
+								color="secondary"
+								className={styles.tagLabel}
+								title="Double-click to edit"
+								testId={`${testId}-chip`}
+								onDoubleClick={(): void => startEdit(index)}
+							>
+								{tag}
+							</Button>
 						</TagBadge>
 					),
 				)}

frontend/src/components/TanStackTableView/TanStackHoverTooltip.tsx

@@ -1,10 +1,14 @@
-import { type ReactNode, useLayoutEffect } from 'react';
+import { type ReactNode, useLayoutEffect, useMemo } from 'react';
 
 import { chromePerformanceTanstackTableEndHover } from './perfDevtools';
 import { useIsRowHovered } from './TanStackTableStateContext';
-import { Tooltip, TooltipProps, TooltipProvider } from '@signozhq/ui/tooltip';
+import {
+	TooltipContentProps,
+	TooltipSimple,
+	TooltipSimpleProps,
+} from '@signozhq/ui/tooltip';
 
-export type HoverTooltipProps = Omit<TooltipProps, 'open'> & {
+export type HoverTooltipProps = Omit<TooltipSimpleProps, 'open'> & {
 	rowId: string;
 	children: ReactNode;
 };
@@ -22,13 +26,28 @@ export function TanStackHoverTooltip({
 		}
 	}, [isHovered, rowId]);
 
+	const tooltipContentProps = useMemo(
+		() =>
+			({
+				onPointerDownOutside: (e): void => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+			}) satisfies TooltipContentProps,
+		[],
+	);
+
 	if (!isHovered) {
 		return <>{children}</>;
 	}
 
 	return (
-		<TooltipProvider delay={700}>
-			<Tooltip {...tooltipProps}>{children}</Tooltip>
-		</TooltipProvider>
+		<TooltipSimple
+			delayDuration={700}
+			tooltipContentProps={tooltipContentProps}
+			{...tooltipProps}
+		>
+			{children}
+		</TooltipSimple>
 	);
 }

frontend/src/components/TanStackTableView/stories/TanStackTableView.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Color } from '@signozhq/design-tokens';
 import { Ellipsis } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import { GroupedStatusCounts } from 'container/InfraMonitoringK8sV2/components/GroupedStatusCounts';
 import type { StatusCountItem } from 'container/InfraMonitoringK8sV2/components/GroupedStatusCounts';
 import { ValidateColumnValueWrapper } from 'container/InfraMonitoringK8sV2/components/ValidateColumnValueWrapper';
@@ -104,8 +104,7 @@ const rowActions = (): JSX.Element => (
 		<Button
 			aria-label="Service actions"
 			color="secondary"
-			size="sm"
-			icon
+			size="icon"
 			variant="outlined"
 		>
 			<Ellipsis size={16} />

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { DropdownMenuSimple } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {

frontend/src/container/AIAssistant/AIAssistantDrawer/AIAssistantDrawer.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Drawer } from 'antd';
 import ROUTES from 'constants/routes';
 import { Maximize2, Plus, X } from '@signozhq/icons';
@@ -53,25 +53,22 @@ export default function AIAssistantDrawer(): JSX.Element {
 					</div>
 
 					<div>
-						<Tooltip title="New conversation">
+						<TooltipSimple title="New conversation">
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={handleNewConversation}
 								aria-label="New conversation"
 							>
 								<Plus size={16} />
 							</Button>
-						</Tooltip>
+						</TooltipSimple>
 
-						<Tooltip title="Open full screen">
+						<TooltipSimple title="Open full screen">
 							<Button
-								disabledTooltip={undefined}
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={handleExpand}
 								disabled={!activeConversationId}
@@ -79,20 +76,19 @@ export default function AIAssistantDrawer(): JSX.Element {
 							>
 								<Maximize2 size={16} />
 							</Button>
-						</Tooltip>
+						</TooltipSimple>
 
-						<Tooltip title="Close">
+						<TooltipSimple title="Close">
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={closeDrawer}
 								aria-label="Close drawer"
 							>
 								<X size={16} />
 							</Button>
-						</Tooltip>
+						</TooltipSimple>
 					</div>
 				</div>
 			}

frontend/src/container/AIAssistant/AIAssistantModal/AIAssistantModal.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Minus, Plus, X } from '@signozhq/icons';
 import Noz from 'components/Noz/Noz';
@@ -159,73 +159,62 @@ export default function AIAssistantModal(): JSX.Element | null {
 						</div>
 
 						<div className={styles.actions}>
-							<Tooltip title={showHistory ? 'Back to chat' : 'Conversations'}>
+							<TooltipSimple title={showHistory ? 'Back to chat' : 'Conversations'}>
 								<Button
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={(): void => setShowHistory((v) => !v)}
 									aria-label="Toggle conversations"
 									className={showHistory ? styles.toggleBtnActive : ''}
-								>
-									<History size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<History size={14} />}
+								/>
+							</TooltipSimple>
 
-							<Tooltip title="New conversation">
+							<TooltipSimple title="New conversation">
 								<Button
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={handleNew}
 									aria-label="New conversation"
-								>
-									<Plus size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<Plus size={14} />}
+								/>
+							</TooltipSimple>
 
-							<Tooltip title="Open full screen">
+							<TooltipSimple title="Open full screen">
 								<Button
-									disabledTooltip={undefined}
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={handleExpand}
 									disabled={!activeConversationId}
 									aria-label="Open full screen"
-								>
-									<Maximize2 size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<Maximize2 size={14} />}
+								/>
+							</TooltipSimple>
 
-							<Tooltip title="Minimize to side panel">
+							<TooltipSimple title="Minimize to side panel">
 								<Button
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={handleMinimize}
 									aria-label="Minimize to side panel"
-								>
-									<Minus size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<Minus size={14} />}
+								/>
+							</TooltipSimple>
 
-							<Tooltip title="Close">
+							<TooltipSimple title="Close">
 								<Button
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={closeModal}
 									aria-label="Close"
-								>
-									<X size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<X size={14} />}
+								/>
+							</TooltipSimple>
 						</div>
 					</div>
 

frontend/src/container/AIAssistant/AIAssistantPanel/AIAssistantPanel.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Plus, X } from '@signozhq/icons';
 import Noz from 'components/Noz/Noz';
@@ -144,59 +144,50 @@ export default function AIAssistantPanel(): JSX.Element | null {
 					</div>
 
 					<div className={styles.actions}>
-						<Tooltip title={showHistory ? 'Back to chat' : 'Conversations'}>
+						<TooltipSimple title={showHistory ? 'Back to chat' : 'Conversations'}>
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={(): void => setShowHistory((v) => !v)}
 								aria-label="Toggle conversations"
-							>
-								<History size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<History size={14} />}
+							/>
+						</TooltipSimple>
 
-						<Tooltip title="New conversation">
+						<TooltipSimple title="New conversation">
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={handleNew}
 								aria-label="New conversation"
-							>
-								<Plus size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<Plus size={14} />}
+							/>
+						</TooltipSimple>
 
-						<Tooltip title="Open full screen">
+						<TooltipSimple title="Open full screen">
 							<Button
-								disabledTooltip={undefined}
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={handleExpand}
 								disabled={!activeConversationId}
 								aria-label="Open full screen"
-							>
-								<Maximize2 size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<Maximize2 size={14} />}
+							/>
+						</TooltipSimple>
 
-						<Tooltip title="Close">
+						<TooltipSimple title="Close">
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={closeDrawer}
 								aria-label="Close panel"
-							>
-								<X size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<X size={14} />}
+							/>
+						</TooltipSimple>
 					</div>
 				</div>
 

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { matchPath, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import Noz from 'components/Noz/Noz';
@@ -43,18 +43,15 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 	}
 
 	return (
-		<Tooltip title={NOZ_TOOLTIP_TITLE}>
+		<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 			<Button
-				size="md"
 				variant="solid"
 				color="primary"
-				icon
 				className={`${styles.trigger} noz-wave`}
 				onClick={handleOpen}
 				aria-label="Open Noz"
-			>
-				<Noz size={24} />
-			</Button>
-		</Tooltip>
+				prefix={<Noz size={24} />}
+			/>
+		</TooltipSimple>
 	);
 }

frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx

@@ -12,7 +12,7 @@ import {
 import cx from 'classnames';
 import { v4 as uuidv4 } from 'uuid';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { MessageActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 import {
 	ApplyFilterSignalDTO,
@@ -631,7 +631,6 @@ export default function ActionsSection({
 
 					const chip = (
 						<Button
-							disabledTooltip={undefined}
 							variant="outlined"
 							color="secondary"
 							size="sm"
@@ -646,9 +645,9 @@ export default function ActionsSection({
 					);
 
 					return tooltip ? (
-						<Tooltip key={key} title={tooltip}>
+						<TooltipSimple key={key} title={tooltip}>
 							{chip}
-						</Tooltip>
+						</TooltipSimple>
 					) : (
 						<span key={key}>{chip}</span>
 					);

frontend/src/container/AIAssistant/components/ApprovalCard/ApprovalCard.tsx

@@ -10,8 +10,8 @@ import {
 	DialogSubtitle,
 	DialogTitle,
 } from '@signozhq/ui/dialog';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type {
 	ApprovalEventDTO,
 	ApprovalEventDTODiff,
@@ -101,18 +101,16 @@ export default function ApprovalCard({
 				<div className={styles.diffSection}>
 					<div className={styles.diffHeader}>
 						<span className={styles.diffHeaderLabel}>Diff</span>
-						<Tooltip title="Expand diff">
+						<TooltipSimple title="Expand diff">
 							<Button
 								variant="link"
 								size="sm"
 								color="secondary"
-								icon
 								onClick={(): void => setDiffExpanded(true)}
 								aria-label="Expand diff"
-							>
-								<Maximize2 size={12} />
-							</Button>
-						</Tooltip>
+								prefix={<Maximize2 size={12} />}
+							/>
+						</TooltipSimple>
 					</div>
 					<DiffView diff={approval.diff} />
 				</div>
@@ -134,9 +132,7 @@ export default function ApprovalCard({
 					<div className={styles.diffModalBody}>
 						<p className={styles.diffModalSummary}>{approval.summary}</p>
 						<div className={styles.diffToolbarRow}>
-							<ToggleGroup
-								variant="outlined"
-								color="secondary"
+							<ToggleGroupSimple
 								type="single"
 								size="sm"
 								value={viewMode}
@@ -160,9 +156,7 @@ export default function ApprovalCard({
 									},
 								]}
 							/>
-							<ToggleGroup
-								variant="outlined"
-								color="secondary"
+							<ToggleGroupSimple
 								type="multiple"
 								size="sm"
 								value={wrapText ? ['wrap'] : []}
@@ -191,8 +185,6 @@ export default function ApprovalCard({
 
 			<div className={styles.actions}>
 				<Button
-					disabledTooltip={undefined}
-					color="primary"
 					variant="solid"
 					size="sm"
 					onClick={handleApprove}
@@ -202,7 +194,6 @@ export default function ApprovalCard({
 					Approve
 				</Button>
 				<Button
-					disabledTooltip={undefined}
 					variant="outlined"
 					size="sm"
 					color="secondary"
@@ -474,7 +465,7 @@ function CopyButton({ text, label }: CopyButtonProps): JSX.Element {
 	};
 
 	return (
-		<Tooltip title={copied ? `Copied ${label}` : `Copy ${label}`}>
+		<TooltipSimple title={copied ? `Copied ${label}` : `Copy ${label}`}>
 			<Button
 				variant="ghost"
 				size="sm"
@@ -484,6 +475,6 @@ function CopyButton({ text, label }: CopyButtonProps): JSX.Element {
 			>
 				{copied ? <Check size={12} /> : <Copy size={12} />}
 			</Button>
-		</Tooltip>
+		</TooltipSimple>
 	);
 }

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -12,7 +12,7 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { UploadFile } from 'antd';
 import getSessionStorage from 'api/browser/sessionstorage/get';
 import setSessionStorage from 'api/browser/sessionstorage/set';
@@ -900,10 +900,8 @@ export default function ChatInput({
 						<div key={f.uid} className={styles.attachmentChip}>
 							<span className={styles.attachmentName}>{f.name}</span>
 							<Button
-								color="secondary"
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								className={styles.attachmentRemove}
 								onClick={(): void => removeFile(f.uid)}
 								aria-label={`Remove ${f.name}`}
@@ -927,7 +925,7 @@ export default function ChatInput({
 								<div className={styles.contextTagContent}>
 									<Badge
 										color="secondary"
-										variant="outlined"
+										variant="outline"
 										className={styles.contextTagCategory}
 									>
 										{category}
@@ -937,15 +935,13 @@ export default function ChatInput({
 								{onDismissAutoContext && (
 									<Button
 										variant="link"
-										size="sm"
-										icon
+										size="icon"
 										color="secondary"
 										className={styles.contextTagRemove}
 										onClick={(): void => onDismissAutoContext(key)}
 										aria-label={`Remove ${category}: ${label} context`}
-									>
-										<X size={10} />
-									</Button>
+										prefix={<X size={10} />}
+									></Button>
 								)}
 							</div>
 						);
@@ -958,7 +954,7 @@ export default function ChatInput({
 							<div className={styles.contextTagContent}>
 								<Badge
 									color="primary"
-									variant="outlined"
+									variant="outline"
 									className={styles.contextTagCategory}
 								>
 									{contextItem.category}
@@ -967,17 +963,15 @@ export default function ChatInput({
 							</div>
 							<Button
 								variant="link"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								className={styles.contextTagRemove}
 								onClick={(): void =>
 									removeContext(contextItem.category, contextItem.entityId)
 								}
 								aria-label={`Remove ${contextItem.category}: ${contextItem.value} context`}
-							>
-								<X size={10} />
-							</Button>
+								prefix={<X size={10} />}
+							></Button>
 						</div>
 					))}
 				</div>
@@ -1026,7 +1020,6 @@ export default function ChatInput({
 					>
 						<PopoverTrigger asChild>
 							<Button
-								disabledTooltip={undefined}
 								variant="solid"
 								color="secondary"
 								size="sm"
@@ -1066,6 +1059,7 @@ export default function ChatInput({
 												variant="ghost"
 												color="secondary"
 												size="sm"
+												role="tab"
 												id={`ai-context-tab-${category}`}
 												// Single stable panel id shared by every tab: only the
 												// active category's tabpanel is rendered, so per-category
@@ -1184,20 +1178,18 @@ export default function ChatInput({
 								aria-live="polite"
 								aria-label="Recording voice input"
 							>
-								<Tooltip title="Discard recording">
+								<TooltipSimple title="Discard recording">
 									<Button
 										type="button"
 										variant="ghost"
-										size="sm"
-										icon
+										size="icon"
 										color="secondary"
 										className={cx(styles.micDiscard, styles.secondary)}
 										onClick={handleDiscard}
 										aria-label="Discard recording"
-									>
-										<X size={12} />
-									</Button>
-								</Tooltip>
+										prefix={<X size={12} />}
+									/>
+								</TooltipSimple>
 								<span className={styles.micWaves} aria-hidden="true">
 									<span />
 									<span />
@@ -1208,67 +1200,56 @@ export default function ChatInput({
 									<span />
 									<span />
 								</span>
-								<Tooltip title="Stop and send">
+								<TooltipSimple title="Stop and send">
 									<Button
 										type="button"
-										variant="solid"
-										size="sm"
-										icon
-										color="danger"
+										variant="ghost"
+										size="icon"
+										color="destructive"
 										className={cx(styles.micStop, styles.destructive)}
 										onClick={handleStopAndSend}
 										aria-label="Stop and send"
-									>
-										<Square size={9} fill="currentColor" strokeWidth={0} />
-									</Button>
-								</Tooltip>
+										prefix={<Square size={9} fill="currentColor" strokeWidth={0} />}
+									/>
+								</TooltipSimple>
 							</div>
 						) : (
-							<Tooltip title="Voice input">
+							<TooltipSimple title="Voice input">
 								<Button
-									disabledTooltip={undefined}
-									color="secondary"
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									onClick={(): void => startVoiceInput(VoiceInputSource.Button)}
 									disabled={disabled}
 									aria-label="Start voice input"
 									className={styles.micBtn}
-								>
-									<Mic size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<Mic size={14} />}
+								/>
+							</TooltipSimple>
 						))}
 
 					{isStreaming && onCancel ? (
-						<Tooltip title="Stop generating">
+						<TooltipSimple title="Stop generating">
 							<Button
 								variant="solid"
-								size="sm"
-								icon
-								color="danger"
+								size="icon"
+								color="destructive"
 								onClick={onCancel}
 								aria-label="Stop generating"
-							>
-								<Square size={10} fill="currentColor" strokeWidth={0} />
-							</Button>
-						</Tooltip>
+								prefix={<Square size={10} fill="currentColor" strokeWidth={0} />}
+							/>
+						</TooltipSimple>
 					) : (
-						<Tooltip title="Send message">
+						<TooltipSimple title="Send message">
 							<Button
-								disabledTooltip={undefined}
 								variant="solid"
-								size="sm"
-								icon
+								size="icon"
 								color="primary"
 								onClick={isListening ? handleStopAndSend : handleSend}
 								disabled={disabled || (!text.trim() && pendingFiles.length === 0)}
 								aria-label="Send message"
-							>
-								<Send size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<Send size={14} />}
+							/>
+						</TooltipSimple>
 					)}
 				</div>
 			</div>

frontend/src/container/AIAssistant/components/ChatInput/ContextPickerEmptyState.tsx

@@ -58,7 +58,7 @@ export default function ContextPickerEmptyState({
 				color="primary"
 				className={styles.contextPopoverEmptyCta}
 				onClick={(): void => onPrefill(prefill)}
-				testId={`ai-context-empty-cta-${category}`}
+				data-testid={`ai-context-empty-cta-${category}`}
 				prefix={<Sparkles size={14} />}
 			>
 				<span className={styles.contextPopoverEmptyCtaLabel}>{ctaLabel}</span>

frontend/src/container/AIAssistant/components/ClarificationForm/ClarificationForm.tsx

@@ -140,8 +140,6 @@ export default function ClarificationForm({
 
 			<div className={styles.actions}>
 				<Button
-					disabledTooltip={undefined}
-					size="md"
 					variant="solid"
 					color="primary"
 					onClick={handleSubmit}
@@ -151,8 +149,6 @@ export default function ClarificationForm({
 					Submit
 				</Button>
 				<Button
-					disabledTooltip={undefined}
-					size="md"
 					variant="outlined"
 					color="secondary"
 					onClick={handleCancel}
@@ -314,7 +310,6 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 		return (
 			<div className={styles.field}>
 				<Checkbox
-					color="primary"
 					className={styles.checkboxLabel}
 					value={checked}
 					onChange={(): void => onChange(!checked)}
@@ -387,7 +382,6 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 				<div className={styles.checkboxGroup}>
 					{options?.map((opt) => (
 						<Checkbox
-							color="primary"
 							key={opt}
 							className={styles.checkboxLabel}
 							value={regularSelected.includes(opt)}
@@ -398,7 +392,6 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 					))}
 					{allowCustom && (
 						<Checkbox
-							color="primary"
 							className={styles.checkboxLabel}
 							value={isCustom}
 							onChange={toggleCustom}

frontend/src/container/AIAssistant/components/ConversationItem/ConversationItem.tsx

@@ -6,7 +6,7 @@ import { getAbsoluteUrl } from 'utils/basePath';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { toast } from '@signozhq/ui/sonner';
-import { DropdownMenuSimple } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 
 import {
 	Archive,
@@ -207,18 +207,17 @@ export default function ConversationItem({
 					<DropdownMenuSimple
 						menu={{ items: menuItems }}
 						align="end"
+						sideOffset={4}
 						className={styles.menu}
 					>
 						<Button
 							variant="link"
-							size="sm"
-							icon
-							color="secondary"
+							size="icon"
+							color="none"
 							className={styles.btn}
 							aria-label="Conversation actions"
-						>
-							<EllipsisVertical size={12} />
-						</Button>
+							prefix={<EllipsisVertical size={12} />}
+						/>
 					</DropdownMenuSimple>
 				</div>
 			)}

frontend/src/container/AIAssistant/components/ConversationsList/ConversationsList.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Plus, Search } from '@signozhq/icons';
 
 import logEvent from 'api/common/logEvent';
@@ -171,7 +171,7 @@ export default function ConversationsList({
 				{isLoadingThreads && <HeaderLoadingDots />}
 
 				{!isLoadingThreads && showAddNewConversation && (
-					<Tooltip title="New conversation">
+					<TooltipSimple title="New conversation">
 						<Button
 							variant="solid"
 							size="sm"
@@ -181,7 +181,7 @@ export default function ConversationsList({
 						>
 							<Plus size={12} />
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 				)}
 			</div>
 

frontend/src/container/AIAssistant/components/MessageFeedback/MessageFeedback.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { useCopyToClipboard } from 'react-use';
 import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { Check, Copy, RefreshCw, ThumbsDown, ThumbsUp } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
@@ -174,11 +174,10 @@ export default function MessageFeedback({
 		<>
 			<div className={cx(styles.feedback, { [styles.visible]: isLastAssistant })}>
 				<div className={styles.actions}>
-					<Tooltip title={copied ? 'Copied!' : 'Copy'}>
+					<TooltipSimple title={copied ? 'Copied!' : 'Copy'}>
 						<Button
 							className={styles.btn}
-							size="sm"
-							icon
+							size="icon"
 							variant="ghost"
 							onClick={handleCopy}
 							color="secondary"
@@ -186,15 +185,14 @@ export default function MessageFeedback({
 						>
 							{copied ? <Check size={12} /> : <Copy size={12} />}
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 
-					<Tooltip title={VOTE_LABEL[FeedbackRatingDTO.positive].tooltip}>
+					<TooltipSimple title={VOTE_LABEL[FeedbackRatingDTO.positive].tooltip}>
 						<Button
 							className={cx(styles.btn, {
 								[styles.votedUp]: vote === FeedbackRatingDTO.positive,
 							})}
-							size="sm"
-							icon
+							size="icon"
 							variant="ghost"
 							color="secondary"
 							onClick={(): void => handleVote(FeedbackRatingDTO.positive)}
@@ -203,15 +201,14 @@ export default function MessageFeedback({
 						>
 							<ThumbsUp size={12} />
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 
-					<Tooltip title={VOTE_LABEL[FeedbackRatingDTO.negative].tooltip}>
+					<TooltipSimple title={VOTE_LABEL[FeedbackRatingDTO.negative].tooltip}>
 						<Button
 							className={cx(styles.btn, {
 								[styles.votedDown]: vote === FeedbackRatingDTO.negative,
 							})}
-							size="sm"
-							icon
+							size="icon"
 							variant="ghost"
 							color="secondary"
 							onClick={(): void => handleVote(FeedbackRatingDTO.negative)}
@@ -220,14 +217,13 @@ export default function MessageFeedback({
 						>
 							<ThumbsDown size={12} />
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 
 					{onRegenerate && (
-						<Tooltip title="Regenerate">
+						<TooltipSimple title="Regenerate">
 							<Button
 								className={styles.btn}
-								size="sm"
-								icon
+								size="icon"
 								variant="ghost"
 								color="secondary"
 								onClick={onRegenerate}
@@ -235,7 +231,7 @@ export default function MessageFeedback({
 							>
 								<RefreshCw size={12} />
 							</Button>
-						</Tooltip>
+						</TooltipSimple>
 					)}
 				</div>
 
@@ -253,19 +249,13 @@ export default function MessageFeedback({
 				footer={
 					<div className={styles.feedbackDialogFooter}>
 						<Button
-							size="md"
 							variant="solid"
 							color="secondary"
 							onClick={(): void => setIsNegativeDialogOpen(false)}
 						>
 							Cancel
 						</Button>
-						<Button
-							size="md"
-							variant="solid"
-							color="primary"
-							onClick={handleSubmitNegative}
-						>
+						<Button variant="solid" color="primary" onClick={handleSubmitNegative}>
 							Send feedback
 						</Button>
 					</div>

frontend/src/container/AIAssistant/components/UserMessageActions/UserMessageActions.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Check, Copy } from '@signozhq/icons';
 
 import logEvent from 'api/common/logEvent';
@@ -40,11 +40,10 @@ export default function UserMessageActions({
 
 	return (
 		<div className={styles.actions}>
-			<Tooltip title={copied ? 'Copied!' : 'Copy'}>
+			<TooltipSimple title={copied ? 'Copied!' : 'Copy'}>
 				<Button
 					className={styles.btn}
-					size="sm"
-					icon
+					size="icon"
 					variant="ghost"
 					color="secondary"
 					onClick={handleCopy}
@@ -52,7 +51,7 @@ export default function UserMessageActions({
 				>
 					{copied ? <Check size={12} /> : <Copy size={12} />}
 				</Button>
-			</Tooltip>
+			</TooltipSimple>
 		</div>
 	);
 }

frontend/src/container/AIAssistant/components/blocks/ActionBlock/ActionBlock.tsx

@@ -189,16 +189,11 @@ export default function ActionBlock({
 			)}
 
 			<div className={styles.actions}>
-				<Button color="primary" variant="solid" size="sm" onClick={execute}>
+				<Button variant="solid" size="sm" onClick={execute}>
 					<Check size={12} />
 					Apply
 				</Button>
-				<Button
-					color="secondary"
-					variant="outlined"
-					size="sm"
-					onClick={handleDismiss}
-				>
+				<Button variant="outlined" size="sm" onClick={handleDismiss}>
 					<X size={12} />
 					Dismiss
 				</Button>

frontend/src/container/AIAssistant/components/blocks/ConfirmBlock/ConfirmBlock.tsx

@@ -83,17 +83,11 @@ export default function ConfirmBlock({
 		<div className={blockStyles.block}>
 			{message && <p className={styles.message}>{message}</p>}
 			<div className={styles.actions}>
-				<Button
-					color="primary"
-					variant="solid"
-					size="sm"
-					onClick={(): void => handle('accepted')}
-				>
+				<Button variant="solid" size="sm" onClick={(): void => handle('accepted')}>
 					<Check size={12} />
 					{acceptLabel}
 				</Button>
 				<Button
-					color="secondary"
 					variant="outlined"
 					size="sm"
 					onClick={(): void => handle('rejected')}

frontend/src/container/AIAssistant/components/blocks/InteractiveQuestion/InteractiveQuestion.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { Checkbox } from '@signozhq/ui/checkbox';
-import { RadioGroup } from '@signozhq/ui/radio-group';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 
 import { AIAssistantEvents } from '../../../events';
 import { useAIAssistantAnalyticsContext } from '../../../hooks/useAIAssistantAnalyticsContext';
@@ -83,24 +83,27 @@ export default function InteractiveQuestion({
 
 			{type === 'radio' ? (
 				<RadioGroup
-					color="primary"
-					textOverflow="wrap"
 					className={styles.options}
 					onChange={(value): void => {
 						setSelected([value]);
 						handleSubmit([value]);
 					}}
-					items={normalized.map((opt) => ({
-						value: opt.value,
-						label: <span className={styles.option}>{opt.label}</span>,
-					}))}
-				/>
+				>
+					{normalized.map((opt) => (
+						<RadioGroupItem
+							key={opt.value}
+							value={opt.value}
+							className={styles.option}
+						>
+							{opt.label}
+						</RadioGroupItem>
+					))}
+				</RadioGroup>
 			) : (
 				<>
 					<div className={cx(styles.options, styles.checkbox)}>
 						{normalized.map((opt) => (
 							<Checkbox
-								color="primary"
 								key={opt.value}
 								value={selected.includes(opt.value)}
 								onChange={(checked): void => {
@@ -117,8 +120,6 @@ export default function InteractiveQuestion({
 						))}
 					</div>
 					<Button
-						disabledTooltip={undefined}
-						color="primary"
 						variant="solid"
 						size="sm"
 						className={styles.submit}

frontend/src/container/AIAssistant/components/blocks/RichCodeBlock/RichCodeBlock.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Check, Copy } from '@signozhq/icons';
 import SyntaxHighlighter, {
 	a11yDark,
@@ -127,7 +127,7 @@ function CopyButton({ text }: { text: string }): JSX.Element {
 	};
 
 	return (
-		<Tooltip title={copied ? 'Copied' : 'Copy code'}>
+		<TooltipSimple title={copied ? 'Copied' : 'Copy code'}>
 			<Button
 				variant="ghost"
 				size="sm"
@@ -138,6 +138,6 @@ function CopyButton({ text }: { text: string }): JSX.Element {
 			>
 				{copied ? <Check size={12} /> : <Copy size={12} />}
 			</Button>
-		</Tooltip>
+		</TooltipSimple>
 	);
 }

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -320,7 +320,6 @@ function AnomalyAlertEvaluationView({
 							<div className="anomaly-alert-evaluation-view-series-list-items">
 								{filteredSeriesKeys.length > 0 && (
 									<Checkbox
-										color="primary"
 										className="anomaly-alert-evaluation-view-series-list-item"
 										name="series"
 										value={selectedSeries === null}
@@ -333,7 +332,6 @@ function AnomalyAlertEvaluationView({
 								{filteredSeriesKeys.map((seriesKey) => (
 									<div key={seriesKey}>
 										<Checkbox
-											color="primary"
 											className="anomaly-alert-evaluation-view-series-list-item"
 											key={seriesKey}
 											name="series"

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
 import { Button, Drawer } from 'antd';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -225,13 +225,11 @@ function DomainDetails({
 						timeRange={modalTimeRange}
 					/>
 					<div className="views-tabs-container">
-						<ToggleGroup
-							variant="outlined"
-							color="secondary"
+						<ToggleGroupSimple
 							type="single"
 							onChange={handleTabChange}
 							value={selectedView}
-							size="md"
+							size="lg"
 							items={[
 								{ value: VIEW_TYPES.ALL_ENDPOINTS, label: 'All Endpoints' },
 								{ value: VIEW_TYPES.ENDPOINT_STATS, label: 'Endpoint(s) Stats' },

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -171,12 +171,7 @@ function TopErrors({
 					/>
 				</div>
 				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-					<Switch
-						color="primary"
-						textPlacement="right"
-						value={showStatusCodeErrors}
-						onChange={setShowStatusCodeErrors}
-					/>
+					<Switch value={showStatusCodeErrors} onChange={setShowStatusCodeErrors} />
 					<span style={{ color: 'white', fontSize: '14px' }}>
 						Status Message Exists
 					</span>

frontend/src/container/ApiMonitoring/utils.tsx

@@ -973,12 +973,7 @@ export const getEndPointsColumnsConfig = (
 					})()}
 					{isGroupedByAttribute
 						? text.split(',').map((value) => (
-								<Badge
-									variant="solid"
-									key={value}
-									color="secondary"
-									className="endpoint-group-tag-item"
-								>
+								<Badge key={value} color="vanilla" className="endpoint-group-tag-item">
 									{value === '' ? '<no-value>' : value}
 								</Badge>
 							))

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -436,14 +436,7 @@ export default function BillingContainer(): JSX.Element {
 					<Flex vertical gap={8}>
 						<p className={styles.pageInfoTitle}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
-							{isFreeTrial ? (
-								<Badge variant="solid" color="success">
-									{' '}
-									Free Trial{' '}
-								</Badge>
-							) : (
-								''
-							)}
+							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
 						</p>
 
 						{billingData && !isFetchingBillingData && !showGracePeriodMessage ? (

frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx

@@ -141,7 +141,6 @@ function CancelSubscriptionBanner(): JSX.Element {
 	const confirmFooter = (
 		<>
 			<Button
-				size="md"
 				variant="solid"
 				color="secondary"
 				prefix={<Undo2 size={14} />}
@@ -150,14 +149,12 @@ function CancelSubscriptionBanner(): JSX.Element {
 				Go back
 			</Button>
 			<Button
-				disabledTooltip={undefined}
-				size="md"
 				variant="solid"
-				color="danger"
+				color="destructive"
 				prefix={<X size={14} />}
 				disabled={confirmText !== 'cancel'}
 				onClick={handleContactSupport}
-				testId="cancel-subscription-confirm-btn"
+				data-testid="cancel-subscription-confirm-btn"
 			>
 				Cancel subscription
 			</Button>
@@ -165,7 +162,7 @@ function CancelSubscriptionBanner(): JSX.Element {
 	);
 
 	const fallbackFooter = (
-		<Button size="md" variant="solid" color="secondary" onClick={handleClose}>
+		<Button variant="solid" color="secondary" onClick={handleClose}>
 			Close
 		</Button>
 	);
@@ -184,7 +181,6 @@ function CancelSubscriptionBanner(): JSX.Element {
 					</span>
 				</div>
 				<AuthZButton
-					size="md"
 					checks={[SubscriptionDeletePermission]}
 					variant="solid"
 					color="secondary"
@@ -230,32 +226,30 @@ function CancelSubscriptionBanner(): JSX.Element {
 						<span className={styles.fallbackEmail}>{SUPPORT_EMAIL}</span>
 						<div className={styles.fallbackActions}>
 							<Button
-								size="md"
 								variant="outlined"
 								color="secondary"
 								prefix={copied ? <CircleCheck size={14} /> : <Copy size={14} />}
 								onClick={handleCopyTemplate}
-								testId="copy-email-template-btn"
+								data-testid="copy-email-template-btn"
 							>
 								{copied ? 'Copied!' : 'Copy email template'}
 							</Button>
 							<Button
-								size="md"
+								asChild
 								variant="outlined"
 								color="secondary"
-								testId="retry-mailto-btn"
-								prefix={<MailOpen size={14} />}
-								onClick={(): void => {
-									handleRetryMailto();
-									// oxlint-disable-next-line signoz/no-raw-absolute-path -- mailto is an external mail client URL, not an in-app path
-									window.open(
-										buildMailtoUri(orgName, userEmail),
-										'_blank',
-										'noopener,noreferrer',
-									);
-								}}
+								data-testid="retry-mailto-btn"
 							>
-								Reopen email client
+								<a
+									href={buildMailtoUri(orgName, userEmail)}
+									onClick={handleRetryMailto}
+									className={styles.retryLink}
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									<MailOpen size={14} />
+									Reopen email client
+								</a>
 							</Button>
 						</div>
 					</div>

frontend/src/container/Controls/index.tsx

@@ -37,8 +37,6 @@ function Controls({
 	return (
 		<div className={styles.container}>
 			<Button
-				disabledTooltip={undefined}
-				color="primary"
 				variant="link"
 				size="md"
 				disabled={isPreviousDisabled}
@@ -48,8 +46,6 @@ function Controls({
 				Previous
 			</Button>
 			<Button
-				disabledTooltip={undefined}
-				color="primary"
 				variant="link"
 				size="md"
 				disabled={isNextDisabled}

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -66,13 +66,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 					<AlertTypeCard
 						key={option.selection}
 						title={option.title}
-						extra={
-							option.isBeta ? (
-								<Badge variant="solid" color="primary">
-									Beta
-								</Badge>
-							) : undefined
-						}
+						extra={option.isBeta ? <Badge color="robin">Beta</Badge> : undefined}
 						onClick={(e): void => {
 							onSelect(option.selection, isModifierKeyPressed(e));
 						}}

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -445,8 +445,6 @@ export function RoutingPolicyBanner({
 			</Typography.Text>
 			<div className="routing-policies-info-banner-right">
 				<Switch
-					color="primary"
-					textPlacement="right"
 					value={notificationSettings.routingPolicies}
 					testId="routing-policies-switch"
 					onChange={(value): void => {

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx

@@ -50,12 +50,7 @@ function AdvancedOptionItem({
 				>
 					{input}
 				</div>
-				<Switch
-					color="primary"
-					textPlacement="right"
-					onChange={handleOnToggle}
-					value={showInput}
-				/>
+				<Switch onChange={handleOnToggle} value={showInput} />
 			</div>
 		</div>
 	);

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -182,8 +182,6 @@ function Footer(): JSX.Element {
 	const saveAlertButton = useMemo(() => {
 		let button = (
 			<Button
-				disabledTooltip={undefined}
-				size="md"
 				variant="solid"
 				color="primary"
 				onClick={handleSaveAlert}
@@ -217,8 +215,6 @@ function Footer(): JSX.Element {
 	const testAlertButton = useMemo(() => {
 		let button = (
 			<Button
-				disabledTooltip={undefined}
-				size="md"
 				variant="solid"
 				color="secondary"
 				onClick={handleTestNotification}
@@ -251,8 +247,6 @@ function Footer(): JSX.Element {
 	return (
 		<div className="create-alert-v2-footer">
 			<Button
-				disabledTooltip={undefined}
-				size="md"
 				variant="solid"
 				color="secondary"
 				onClick={handleDiscard}

frontend/src/container/CustomDomainSettings/CustomDomainEditModal.tsx

@@ -192,7 +192,6 @@ export default function CustomDomainEditModal({
 						/>
 					) : (
 						<Button
-							disabledTooltip={undefined}
 							variant="solid"
 							size="md"
 							color="primary"

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -11,7 +11,11 @@ import {
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
-import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
 import { Skeleton } from 'antd';
 import {
@@ -44,7 +48,6 @@ function DomainUpdateToast({
 			</span>
 			<div className="custom-domain-toast-actions">
 				<Button
-					color="secondary"
 					variant="ghost"
 					size="sm"
 					className="custom-domain-toast-visit-btn"
@@ -57,18 +60,15 @@ function DomainUpdateToast({
 					Visit new URL
 				</Button>
 				<Button
-					color="secondary"
 					variant="ghost"
-					size="sm"
-					icon
+					size="icon"
 					className="custom-domain-toast-dismiss-btn"
 					onClick={(): void => {
 						toast.dismiss(toastId);
 					}}
 					aria-label="Dismiss"
-				>
-					<X size={14} />
-				</Button>
+					prefix={<X size={14} />}
+				/>
 			</div>
 		</div>
 	);
@@ -181,33 +181,6 @@ export default function CustomDomainSettings(): JSX.Element {
 	const workspaceName =
 		org?.[0]?.displayName || customDomainSubdomain || activeHost?.name;
 
-	const workspaceUrlItems: DropdownItemType[] = [
-		{
-			type: 'group',
-			value: 'all-workspace-urls',
-			label: 'All Workspace URLs',
-			items: sortedHosts.map((host) => ({
-				type: 'link',
-				value: host.name,
-				label: stripProtocol(host.url),
-				suffix:
-					host.name === activeHost?.name ? (
-						<Check size={14} />
-					) : (
-						<ExternalLink size={12} />
-					),
-				render: (
-					<a
-						href={host.url}
-						target="_blank"
-						rel="noopener noreferrer"
-						aria-label={stripProtocol(host.url)}
-					/>
-				),
-			})),
-		},
-	];
-
 	if (isLoadingHosts) {
 		return (
 			<div className="custom-domain-card custom-domain-card--loading">
@@ -232,25 +205,54 @@ export default function CustomDomainSettings(): JSX.Element {
 							!workspaceName ? 'workspace-name-hidden' : ''
 						}`}
 					>
-						<Dropdown
-							items={workspaceUrlItems}
-							nativeButton
-							align="start"
-							side="bottom"
-						>
-							<Button
-								disabledTooltip={undefined}
-								size="md"
-								variant="link"
-								color="secondary"
-								testId="custom-domain-menu-trigger"
-								disabled={isFetchingHosts}
-							>
-								<Link2 size={12} />
-								<span>{stripProtocol(activeHost?.url ?? '')}</span>
-								<ChevronDown size={12} />
-							</Button>
-						</Dropdown>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="link"
+									color="none"
+									data-testid="custom-domain-menu-trigger"
+									disabled={isFetchingHosts}
+								>
+									<Link2 size={12} />
+									<span>{stripProtocol(activeHost?.url ?? '')}</span>
+									<ChevronDown size={12} />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="start">
+								<div className="workspace-url-dropdown">
+									<span className="workspace-url-dropdown-header">
+										All Workspace URLs
+									</span>
+									<div className="workspace-url-dropdown-divider" />
+									{sortedHosts.map((host) => {
+										const isActive = host.name === activeHost?.name;
+										return (
+											<a
+												key={host.name}
+												href={host.url}
+												target="_blank"
+												rel="noopener noreferrer"
+												className={`workspace-url-dropdown-item${
+													isActive ? ' workspace-url-dropdown-item--active' : ''
+												}`}
+											>
+												<span className="workspace-url-dropdown-item-label">
+													{stripProtocol(host.url ?? '')}
+												</span>
+												{isActive ? (
+													<Check size={14} className="workspace-url-dropdown-item-check" />
+												) : (
+													<ExternalLink
+														size={12}
+														className="workspace-url-dropdown-item-external"
+													/>
+												)}
+											</a>
+										);
+									})}
+								</div>
+							</DropdownMenuContent>
+						</DropdownMenu>
 						<span className="custom-domain-card-meta-timezone">
 							<Clock size={11} />
 							{timezone.offset}
@@ -259,8 +261,6 @@ export default function CustomDomainSettings(): JSX.Element {
 				</div>
 
 				<Button
-					disabledTooltip={undefined}
-					size="md"
 					variant="solid"
 					color="secondary"
 					prefix={<FilePenLine size={12} />}

frontend/src/container/Download/Download.tsx

@@ -1,9 +1,6 @@
 import { useState } from 'react';
 import { CloudDownload } from '@signozhq/icons';
-import {
-	DropdownMenuSimple,
-	type MenuProps,
-} from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
 import { Button, Flex } from 'antd';
 import { unparse } from 'papaparse';