feat: adding integration test for new API endpoint

* chore: refactor input

* chore: remove markdown

* chore: update markdown

* fix: minior comments for input

* chore: remove comments

---------

Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.126.0
+    image: signoz/signoz:v0.126.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.126.0
+    image: signoz/signoz:v0.126.1
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.126.0}
+    image: signoz/signoz:${VERSION:-v0.126.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.126.0}
+    image: signoz/signoz:${VERSION:-v0.126.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -7965,6 +7965,80 @@ paths:
       tags:
       - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
+    get:
+      deprecated: false
+      description: This endpoint gets a service and its configuration for the specified
+        cloud integration account
+      operationId: GetAccountService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/CloudintegrationtypesService'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get service for account
+      tags:
+      - cloudintegration
     put:
       deprecated: false
       description: This endpoint updates a service for the specified cloud provider

frontend/plugins/rules/no-antd-components.mjs

@@ -25,6 +25,7 @@ const BANNED_COMPONENTS = {
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
 	Avatar: 'Use @signozhq/ui/avatar instead of antd Avatar.',
 	Divider: 'Use @signozhq/ui/divider Divider instead of antd Divider.',
+	Tag: 'Use @signozhq/ui/badge Bagde instead of antd Tag.',
 };
 
 export default {

frontend/src/api/generated/services/cloudintegration/index.ts

@@ -31,6 +31,8 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
+	GetAccountService200,
+	GetAccountServicePathParameters,
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
@@ -631,6 +633,117 @@ export const useUpdateAccount = <
 > => {
 	return useMutation(getUpdateAccountMutationOptions(options));
 };
+/**
+ * This endpoint gets a service and its configuration for the specified cloud integration account
+ * @summary Get service for account
+ */
+export const getAccountService = (
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetAccountService200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetAccountServiceQueryKey = ({
+	cloudProvider,
+	id,
+	serviceId,
+}: GetAccountServicePathParameters) => {
+	return [
+		`/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+	] as const;
+};
+
+export const getGetAccountServiceQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAccountService>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAccountService>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetAccountServiceQueryKey({ cloudProvider, id, serviceId });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getAccountService>>
+	> = ({ signal }) =>
+		getAccountService({ cloudProvider, id, serviceId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!(cloudProvider && id && serviceId),
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getAccountService>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAccountServiceQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAccountService>>
+>;
+export type GetAccountServiceQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get service for account
+ */
+
+export function useGetAccountService<
+	TData = Awaited<ReturnType<typeof getAccountService>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAccountService>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAccountServiceQueryOptions(
+		{ cloudProvider, id, serviceId },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get service for account
+ */
+export const invalidateGetAccountService = async (
+	queryClient: QueryClient,
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAccountServiceQueryKey({ cloudProvider, id, serviceId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint updates a service for the specified cloud provider
  * @summary Update service

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -8566,6 +8566,19 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
+export type GetAccountServicePathParameters = {
+	cloudProvider: string;
+	id: string;
+	serviceId: string;
+};
+export type GetAccountService200 = {
+	data: CloudintegrationtypesServiceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type UpdateServicePathParameters = {
 	cloudProvider: string;
 	id: string;

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -11,7 +11,6 @@
 }
 
 .divider {
-	border-color: var(--l1-border);
-	margin: 16px 0;
-	margin-top: 10px;
+	--divider-color: var(--l1-border);
+	--divider-margin: 10px 0 16px 0;
 }

frontend/src/components/Badges/Badges.styles.scss

@@ -14,11 +14,6 @@
 	.ant-form-item {
 		margin-bottom: 0;
 	}
-
-	.ant-tag {
-		margin-right: 0;
-		background: var(--card);
-	}
 }
 
 .add-tag-container {

frontend/src/components/Badges/Badges.tsx

@@ -1,11 +1,12 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
-import { Button, Flex, Tag } from 'antd';
+import { Button, Flex } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import Input from 'components/Input';
 
-import './Tags.styles.scss';
+import './Badges.styles.scss';
 
-function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
+function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [inputVisible, setInputVisible] = useState<boolean>(false);
 
@@ -46,14 +47,18 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Tag
+				<Badge
 					key={tag}
-					closable
+					color="vanilla"
 					style={{ userSelect: 'none' }}
-					onClose={(): void => handleClose(tag)}
+					closable
+					onClose={(e): void => {
+						e.preventDefault();
+						handleClose(tag);
+					}}
 				>
-					<span>{tag}</span>
-				</Tag>
+					{tag}
+				</Badge>
 			))}
 
 			{inputVisible && (
@@ -113,4 +118,4 @@ interface AddTagsProps {
 	setTags: Dispatch<SetStateAction<string[]>>;
 }
 
-export default Tags;
+export default Badges;

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -9,7 +9,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Tag, Tooltip } from 'antd';
+import { Select, Tooltip } from 'antd';
 import {
 	OPERATORS,
 	QUERY_BUILDER_OPERATORS_BY_TYPES,
@@ -51,6 +51,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './ClientSideQBSearch.styles.scss';
+import { Badge } from '@signozhq/ui/badge';
 
 export interface AttributeKey {
 	key: string;
@@ -547,10 +548,14 @@ function ClientSideQBSearch(
 
 		return (
 			<span className="qb-search-bar-tokenised-tags">
-				<Tag
-					closable={!searchValue && closable}
-					onClose={onCloseHandler}
+				<Badge
+					color="vanilla"
 					className={tagDetails?.key?.type || ''}
+					closable={!searchValue && closable}
+					onClose={(e): void => {
+						e.preventDefault();
+						onCloseHandler();
+					}}
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
@@ -566,7 +571,7 @@ function ClientSideQBSearch(
 							{chipValue}
 						</TypographyText>
 					</Tooltip>
-				</Tag>
+				</Badge>
 			</span>
 		);
 	};

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -41,14 +41,22 @@ $item-spacing: 8px;
 		width: 100%;
 		background: transparent;
 		border: none;
+		border-radius: 0;
+		box-shadow: none;
 		outline: none;
+		height: auto;
 		color: var(--l1-foreground);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		padding: 0;
-		&.ant-input:focus {
+
+		&:focus,
+		&:focus-visible,
+		&:hover {
+			border: none;
 			box-shadow: none;
+			outline: none;
 		}
 
 		&::placeholder {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Modal, Tag } from 'antd';
+import { Button, Modal } from 'antd';
 import { CircleAlert, X } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
@@ -9,6 +9,7 @@ import APIError from 'types/api/error';
 import ErrorContent from './components/ErrorContent';
 
 import './ErrorModal.styles.scss';
+import { Badge } from '@signozhq/ui/badge';
 
 type Props = {
 	error: APIError;
@@ -45,14 +46,17 @@ function ErrorModal({
 	return (
 		<>
 			{!triggerComponent ? (
-				<Tag
+				<span
 					className="error-modal__trigger"
-					icon={<CircleAlert size={14} color={Color.BG_CHERRY_500} />}
-					color="error"
+					role="button"
+					tabIndex={0}
 					onClick={(): void => setVisible(true)}
+					onKeyDown={undefined}
 				>
-					error
-				</Tag>
+					<Badge color="error">
+						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
+					</Badge>
+				</span>
 			) : (
 				React.cloneElement(triggerComponent, {
 					onClick: () => setVisible(true),

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Card, Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Card, Form } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -266,6 +266,14 @@
 			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
+
+			&:focus:not(:focus-visible),
+			&.ant-btn:focus:not(:focus-visible) {
+				border-color: var(--l2-border);
+				border-left-color: transparent;
+				outline: none;
+				box-shadow: none;
+			}
 		}
 	}
 }
@@ -291,5 +299,21 @@
 		.cm-placeholder {
 			font-size: 12px !important;
 		}
+
+		$add-on-row-height: 38px;
+
+		.periscope-input-with-label {
+			.input {
+				.ant-select {
+					height: $add-on-row-height;
+				}
+			}
+		}
+
+		.input-with-label {
+			.input {
+				height: $add-on-row-height;
+			}
+		}
 	}
 }

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

@@ -14,7 +14,8 @@ import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
-import { Button, Card, Collapse, Popover, Tag, Tooltip } from 'antd';
+import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
@@ -664,26 +665,26 @@ function QuerySearch({
 	// Helper function to render a badge for the current context mode
 	const renderContextBadge = (): JSX.Element => {
 		if (!editingMode) {
-			return <Tag>Unknown</Tag>;
+			return <Badge color="vanilla">Unknown</Badge>;
 		}
 
 		switch (editingMode) {
 			case 'key':
-				return <Tag color="blue">Key</Tag>;
+				return <Badge color="robin">Key</Badge>;
 			case 'operator':
-				return <Tag color="purple">Operator</Tag>;
+				return <Badge color="sakura">Operator</Badge>;
 			case 'value':
-				return <Tag color="green">Value</Tag>;
+				return <Badge color="forest">Value</Badge>;
 			case 'conjunction':
-				return <Tag color="orange">Conjunction</Tag>;
+				return <Badge color="amber">Conjunction</Badge>;
 			case 'function':
-				return <Tag color="cyan">Function</Tag>;
+				return <Badge color="aqua">Function</Badge>;
 			case 'parenthesis':
-				return <Tag color="magenta">Parenthesis</Tag>;
+				return <Badge color="sakura">Parenthesis</Badge>;
 			case 'bracketList':
-				return <Tag color="red">Bracket List</Tag>;
+				return <Badge color="cherry">Bracket List</Badge>;
 			default:
-				return <Tag>Unknown</Tag>;
+				return <Badge color="vanilla">Unknown</Badge>;
 		}
 	};
 
@@ -1304,34 +1305,37 @@ function QuerySearch({
 					Currently editing: {renderContextBadge()}
 					{queryContext?.keyToken && (
 						<span className="triplet-info">
-							Key: <Tag>{queryContext.keyToken}</Tag>
+							Key: <Badge color="vanilla">{queryContext.keyToken}</Badge>
 						</span>
 					)}
 					{queryContext?.operatorToken && (
 						<span className="triplet-info">
-							Operator: <Tag>{queryContext.operatorToken}</Tag>
+							Operator: <Badge color="vanilla">{queryContext.operatorToken}</Badge>
 						</span>
 					)}
 					{queryContext?.valueToken && (
 						<span className="triplet-info">
-							Value: <Tag>{queryContext.valueToken}</Tag>
+							Value: <Badge color="vanilla">{queryContext.valueToken}</Badge>
 						</span>
 					)}
 					{queryContext?.currentPair && (
 						<span className="triplet-info query-pair-info">
-							Current pair: <Tag color="blue">{queryContext.currentPair.key}</Tag>
-							<Tag color="purple">{queryContext.currentPair.operator}</Tag>
+							Current pair: <Badge color="robin">{queryContext.currentPair.key}</Badge>
+							<Badge color="sakura">{queryContext.currentPair.operator}</Badge>
 							{queryContext.currentPair.value && (
-								<Tag color="green">{queryContext.currentPair.value}</Tag>
+								<Badge color="forest">{queryContext.currentPair.value}</Badge>
 							)}
-							<Tag color={queryContext.currentPair.isComplete ? 'success' : 'warning'}>
+							<Badge
+								color={queryContext.currentPair.isComplete ? 'success' : 'warning'}
+							>
 								{queryContext.currentPair.isComplete ? 'Complete' : 'Incomplete'}
-							</Tag>
+							</Badge>
 						</span>
 					)}
 					{queryContext?.queryPairs && queryContext.queryPairs.length > 0 && (
 						<span className="triplet-info">
-							Total pairs: <Tag color="blue">{queryContext.queryPairs.length}</Tag>
+							Total pairs:{' '}
+							<Badge color="robin">{queryContext.queryPairs.length}</Badge>
 						</span>
 					)}
 				</div>

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

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
-import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interfaces';
+import { QueryProps } from 'container/QueryBuilder/type';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -4,6 +4,23 @@
 	padding: 12px;
 	gap: 12px;
 	border-bottom: 1px solid var(--l1-border);
+
+	.search {
+		input {
+			--input-background: var(--l2-background);
+			--input-hover-background: var(--l2-background);
+			--input-focus-background: var(--l2-background);
+			&::placeholder {
+				color: var(--l3-foreground);
+			}
+			--input-font-size: 14px;
+			--input-border-color: var(--l1-border);
+			--input-focus-border-color: var(--primary-background);
+			--input-focus-outline-width: 0;
+			--input-focus-outline-offset: 0;
+		}
+	}
+
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;

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

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Input, Skeleton } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Skeleton } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';

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

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 

frontend/src/components/TableRenderer/BadgeWithTooltip.tsx

@@ -1,36 +1,34 @@
-import { Tag, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 
 import { getLabelRenderingValue } from './utils';
 
-function TagWithToolTip({
+function BadgeWithTooltip({
 	label,
 	value,
-	color,
-}: TagWithToolTipProps): JSX.Element {
+}: BadgeWithTooltipProps): JSX.Element {
 	const tooltipTitle =
 		value && value[label] ? `${label}: ${value[label]}` : label;
 	return (
 		<div key={label}>
 			<Tooltip title={tooltipTitle}>
-				<Tag className="label-column--tag" color={color}>
+				<Badge className="label-column--tag" color="vanilla">
 					{getLabelRenderingValue(label, value && value[label])}
-				</Tag>
+				</Badge>
 			</Tooltip>
 		</div>
 	);
 }
 
-type TagWithToolTipProps = {
+type BadgeWithTooltipProps = {
 	label: string;
-	color?: string;
 	value?: {
 		[key: string]: string;
 	};
 };
 
-TagWithToolTip.defaultProps = {
+BadgeWithTooltip.defaultProps = {
 	value: undefined,
-	color: undefined,
 };
 
-export default TagWithToolTip;
+export default BadgeWithTooltip;

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -1,12 +1,13 @@
-import { Popover, Tag } from 'antd';
+import { Popover } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 
 import { LabelColumnProps } from './TableRenderer.types';
-import TagWithToolTip from './TagWithToolTip';
+import BadgeWithTooltip from './BadgeWithTooltip';
 import { getLabelAndValueContent } from './utils';
 
 import './LabelColumn.styles.scss';
 
-function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
+function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 	const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
 	const remainingLabels = labels.length > 3 ? labels.slice(3) : [];
 
@@ -14,7 +15,7 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 		<div className="label-column">
 			{newLabels.map(
 				(label: string): JSX.Element => (
-					<TagWithToolTip key={label} label={label} color={color} value={value} />
+					<BadgeWithTooltip key={label} label={label} value={value} />
 				),
 			)}
 			{remainingLabels.length > 0 && (
@@ -26,9 +27,9 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 							{labels.map(
 								(label: string): JSX.Element => (
 									<div key={label}>
-										<Tag className="label-column--tag" color={color}>
+										<Badge className="label-column--tag" color="vanilla">
 											{getLabelAndValueContent(label, value && value[label])}
-										</Tag>
+										</Badge>
 									</div>
 								),
 							)}
@@ -36,9 +37,9 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 					}
 					trigger="hover"
 				>
-					<Tag className="label-column--tag" color={color}>
+					<Badge className="label-column--tag" color="vanilla">
 						+{remainingLabels.length}
-					</Tag>
+					</Badge>
 				</Popover>
 			)}
 		</div>

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
+import { TableColumnType as ColumnType, Tooltip } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
+import { Badge } from '@signozhq/ui/badge';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
@@ -972,13 +973,9 @@ export const getEndPointsColumnsConfig = (
 					})()}
 					{isGroupedByAttribute
 						? text.split(',').map((value) => (
-								<Tag
-									key={value}
-									color={Color.BG_SLATE_100}
-									className="endpoint-group-tag-item"
-								>
+								<Badge key={value} color="vanilla" className="endpoint-group-tag-item">
 									{value === '' ? '<no-value>' : value}
-								</Tag>
+								</Badge>
 							))
 						: endPointName}
 				</div>

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -14,8 +14,8 @@ import {
 	Skeleton,
 	Table,
 	TableColumnsType as ColumnsType,
-	Tag,
 } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
@@ -434,7 +434,7 @@ export default function BillingContainer(): JSX.Element {
 					<Flex vertical>
 						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
-							{isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''}
+							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
 						</Typography.Title>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (

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

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row, Tag } from 'antd';
+import { Row } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
@@ -66,13 +67,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 					<AlertTypeCard
 						key={option.selection}
 						title={option.title}
-						extra={
-							option.isBeta ? (
-								<Tag bordered={false} color="geekblue">
-									Beta
-								</Tag>
-							) : undefined
-						}
+						extra={option.isBeta ? <Badge color="robin">Beta</Badge> : undefined}
 						onClick={(e): void => {
 							onSelect(option.selection, isModifierKeyPressed(e));
 						}}

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

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';

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

@@ -1,4 +1,5 @@
-import { Collapse, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Collapse } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
 import './TimeInput.scss';
 
 export interface TimeInputProps {

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,4 +1,5 @@
-import { Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -16,8 +16,10 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
+import { Button, Card, Modal, Popover, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
+import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
@@ -506,9 +508,9 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 			{(tags?.length || 0) > 0 && (
 				<div className="dashboard-tags">
 					{tags?.map((tag) => (
-						<Tag key={tag} className="tag">
+						<Badge key={tag} className="tag" color="vanilla">
 							{tag}
-						</Tag>
+						</Badge>
 					))}
 				</div>
 			)}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -359,7 +359,7 @@
 				flex-flow: wrap;
 				gap: 8px;
 
-				.ant-tag {
+				[data-slot='badge'] {
 					height: 30px;
 					color: var(--l1-foreground);
 					font-family: 'Space Mono';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -5,7 +5,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select, Tag } from 'antd';
+import { Button, Collapse, Input, Select } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
@@ -542,9 +543,9 @@ function VariableItem({
 								}}
 							>
 								Dynamic
-								<Tag bordered={false} className="sidenav-beta-tag" color="geekblue">
+								<Badge color="robin" className="sidenav-beta-tag">
 									Beta
-								</Tag>
+								</Badge>
 							</Button>
 							<Button
 								type="text"
@@ -599,9 +600,9 @@ function VariableItem({
 								}}
 							>
 								Query
-								<Tag bordered={false} className="sidenav-beta-tag" color="warning">
+								<Badge color="amber" className="sidenav-beta-tag">
 									Not Recommended
-								</Tag>
+								</Badge>
 								<div onClick={(e): void => e.stopPropagation()}>
 									<TextToolTip
 										text="Learn why we don't recommend"
@@ -733,7 +734,9 @@ function VariableItem({
 										<Typography style={{ color: orange[5] }}>{errorPreview}</Typography>
 									) : (
 										map(previewValues, (value, idx) => (
-											<Tag key={`${value}${idx}`}>{value.toString()}</Tag>
+											<Badge key={`${value}${idx}`} color="vanilla">
+												{value.toString()}
+											</Badge>
 										))
 									)}
 								</div>

frontend/src/container/DashboardContainer/DashboardSettings/General/AddBadges/AddBadges.module.scss

@@ -1,4 +1,38 @@
-.tags-input {
+.badgesContainer {
+	display: flex;
+	align-items: center;
+	flex-flow: wrap;
+	gap: 6px;
+}
+
+.badgeContainer {
+	color: var(--bg-sienna-400);
+	font-family: 'Space Mono';
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 20px;
+	letter-spacing: 0.52px;
+	height: 24px;
+	flex-shrink: 0;
+	border-radius: 50px;
+	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+	padding: 2px 8px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.inputContainer {
+	> div {
+		margin: 0;
+	}
+	padding-left: 0px !important;
+	padding-right: 0px !important;
+}
+
+.tagsInput {
 	display: flex;
 	border: none;
 	padding: 0px;
@@ -8,23 +42,7 @@
 	flex-shrink: 0;
 }
 
-.tag-container {
-	color: var(--bg-sienna-400);
-	font-family: 'Space Mono';
-	font-size: 13px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 20px; /* 153.846% */
-	letter-spacing: 0.52px;
-	height: 24px;
-	flex-shrink: 0;
-	border-radius: 50px;
-	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-	padding: 2px 8px;
-}
-
-.edit-input {
+.editInput {
 	.ant-form-item {
 		margin-bottom: 0px;
 	}

frontend/src/container/DashboardContainer/DashboardSettings/General/AddBadges/index.tsx

@@ -1,10 +1,9 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 import { Col, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import Input from 'components/Input';
 
-import { InputContainer, NewTagContainer, TagsContainer } from './styles';
-
-import './AddTags.styles.scss';
+import styles from './AddBadges.module.scss';
 
 function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
@@ -39,11 +38,11 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 	};
 
 	return (
-		<TagsContainer>
+		<div className={styles.badgesContainer}>
 			{tags.map((tag, index) => {
 				if (editInputIndex === index) {
 					return (
-						<Col key={tag} lg={4} className="edit-input">
+						<Col key={tag} lg={4} className={styles.editInput}>
 							<Input
 								size="small"
 								value={editInputValue}
@@ -60,11 +59,15 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 				const isLongTag = tag.length > 20;
 
 				const tagElem = (
-					<NewTagContainer
-						closable
+					<Badge
 						key={tag}
-						onClose={(): void => handleClose(tag)}
-						className="tag-container"
+						color="vanilla"
+						className={styles.badgeContainer}
+						closable
+						onClose={(e): void => {
+							e.preventDefault();
+							handleClose(tag);
+						}}
 					>
 						<span
 							onDoubleClick={(e): void => {
@@ -75,7 +78,7 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 						>
 							{isLongTag ? `${tag.slice(0, 20)}...` : tag}
 						</span>
-					</NewTagContainer>
+					</Badge>
 				);
 
 				return isLongTag ? (
@@ -87,11 +90,11 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 				);
 			})}
 
-			<InputContainer>
+			<Col className={styles.inputContainer}>
 				<Input
 					type="text"
 					value={inputValue}
-					rootClassName="tags-input"
+					rootClassName={styles.tagsInput}
 					placeholder="Start typing your tag name"
 					onChangeHandler={(event): void =>
 						onChangeHandler(event.target.value, setInputValue)
@@ -99,8 +102,8 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 					onBlurHandler={handleInputConfirm}
 					onPressEnterHandler={handleInputConfirm}
 				/>
-			</InputContainer>
-		</TagsContainer>
+			</Col>
+		</div>
 	);
 }
 

frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/styles.ts

@@ -1,30 +0,0 @@
-import { Col, Tag } from 'antd';
-import styled from 'styled-components';
-
-export const TagsContainer = styled.div`
-	display: flex;
-	align-items: center;
-	flex-flow: wrap;
-	gap: 6px;
-`;
-
-export const NewTagContainer = styled(Tag)`
-	&&& {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		height: 100%;
-
-		svg {
-			margin-right: 0.2rem;
-		}
-	}
-`;
-
-export const InputContainer = styled(Col)`
-	> div {
-		margin: 0;
-	}
-	padding-left: 0px !important;
-	padding-right: 0px !important;
-`;

frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Col, Input, Select, Space, Tooltip } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
+import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
 import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
 import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -23,6 +23,10 @@
 			}
 		}
 	}
+
+	&__divider {
+		--divider-vertical-margin: 0;
+	}
 }
 
 .hide-update {
@@ -55,12 +59,6 @@
 	.hidden {
 		display: none;
 	}
-
-	.ant-divider {
-		margin: 0;
-		height: 28px;
-		border: 1px solid var(--l1-border);
-	}
 }
 
 .explorer-options {

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -22,7 +22,6 @@ import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
 	ColorPicker,
-	Input,
 	Modal,
 	RefSelectProps,
 	Select,
@@ -30,6 +29,7 @@ import {
 } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
+import { Input } from '@signozhq/ui/input';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
@@ -874,7 +874,9 @@ function ExplorerOptions({
 						<>
 							<Divider
 								type="vertical"
-								className={isEditDeleteSupported ? '' : 'hidden'}
+								className={cx('explorer-options-container__divider', {
+									hidden: !isEditDeleteSupported,
+								})}
 							/>
 							<Tooltip title="Update this view" placement="top">
 								<Button

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { EmailChannel } from '../../CreateAlertChannels/config';
 
 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
 import { WebhookChannel } from '../../CreateAlertChannels/config';

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,7 +1,8 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormInstance, Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
+import { Form, FormInstance, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';

frontend/src/container/FormAlertRules/labels/QueryChip.tsx

@@ -1,24 +0,0 @@
-import { QueryChipContainer, QueryChipItem } from './styles';
-import { ILabelRecord } from './types';
-
-interface QueryChipProps {
-	queryData: ILabelRecord;
-	onRemove: (id: string) => void;
-}
-
-export default function QueryChip({
-	queryData,
-	onRemove,
-}: QueryChipProps): JSX.Element {
-	const { key, value } = queryData;
-	return (
-		<QueryChipContainer>
-			<QueryChipItem
-				closable={key !== 'severity' && key !== 'description'}
-				onClose={(): void => onRemove(key)}
-			>
-				{key}: {value}
-			</QueryChipItem>
-		</QueryChipContainer>
-	);
-}

frontend/src/container/FormAlertRules/labels/index.tsx

@@ -7,8 +7,8 @@ import { map } from 'lodash-es';
 import { Labels } from 'types/api/alerts/def';
 import { v4 as uuid } from 'uuid';
 
-import QueryChip from './QueryChip';
-import { QueryChipItem, SearchContainer } from './styles';
+import { Badge } from '@signozhq/ui/badge';
+import { QueryChipContainer, QueryChipItem, SearchContainer } from './styles';
 import { ILabelRecord } from './types';
 import { createQuery, flattenLabels, prepareLabels } from './utils';
 
@@ -147,12 +147,24 @@ function LabelSelect({
 		<SearchContainer isDarkMode={isDarkMode} disabled={false}>
 			<div style={{ display: 'inline-flex', flexWrap: 'wrap' }}>
 				{queries.length > 0 &&
-					map(
-						queries,
-						(query): JSX.Element => (
-							<QueryChip key={query.key} queryData={query} onRemove={handleClose} />
-						),
-					)}
+					map(queries, (query): JSX.Element => {
+						const isClosable =
+							query.key !== 'severity' && query.key !== 'description';
+						return (
+							<QueryChipContainer key={query.key}>
+								<Badge
+									color="vanilla"
+									closable={isClosable}
+									onClose={(e): void => {
+										e.preventDefault();
+										handleClose(query.key);
+									}}
+								>
+									{query.key}: {query.value}
+								</Badge>
+							</QueryChipContainer>
+						);
+					})}
 			</div>
 			<div>
 				{map(staging, (item) => (

frontend/src/container/FormAlertRules/labels/styles.ts

@@ -1,5 +1,5 @@
 import { grey } from '@ant-design/colors';
-import { Tag } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import styled from 'styled-components';
 
 interface SearchContainerProps {
@@ -27,8 +27,11 @@ export const QueryChipContainer = styled.span`
 			background: ${grey.primary}44;
 		}
 	}
+	[data-slot='badge'] {
+		margin-right: 0.1rem;
+	}
 `;
 
-export const QueryChipItem = styled(Tag)`
+export const QueryChipItem = styled(Badge)`
 	margin-right: 0.1rem;
 `;

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -6,7 +6,8 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Form, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Button, Skeleton, Tag } from 'antd';
+import { Button, Skeleton } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import logEvent from 'api/common/logEvent';
 import { useListRules } from 'api/generated/services/rules';
 import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
@@ -177,12 +178,14 @@ export default function AlertRules({
 						</div>
 
 						<div className="alert-rule-item-description home-data-item-tag">
-							<Tag color={rule?.labels?.severity}>{rule?.labels?.severity}</Tag>
+							<Badge color="sienna" variant="outline">
+								{rule?.labels?.severity}
+							</Badge>
 
 							{rule.state === 'firing' && (
-								<Tag color="red" className="firing-tag">
+								<Badge color="cherry" variant="outline" className="firing-tag">
 									{rule.state}
-								</Tag>
+								</Badge>
 							)}
 						</div>
 					</div>

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Skeleton, Tag } from 'antd';
+import { Button, Skeleton } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
@@ -148,9 +149,9 @@ export default function Dashboards({
 
 							<div className="alert-rule-item-description home-data-item-tag">
 								{dashboard.data.tags?.map((tag) => (
-									<Tag color={tag} key={tag}>
+									<Badge color="sienna" variant="outline" key={tag}>
 										{tag}
-									</Tag>
+									</Badge>
 								))}
 							</div>
 						</div>

frontend/src/container/Home/Home.styles.scss

@@ -574,30 +574,7 @@
 
 		.home-data-item-tag {
 			display: flex;
-
-			.ant-tag {
-				display: flex;
-				padding: 2px 12px;
-				justify-content: center;
-				align-items: center;
-				gap: 4px;
-				border-radius: 20px;
-				border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-				background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-
-				color: var(--bg-sienna-400);
-				text-align: center;
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-
-			.firing-tag {
-				color: var(--bg-sakura-500);
-				background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-			}
+			gap: 6px;
 		}
 
 		&.services-list-container {

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Skeleton, Tag } from 'antd';
+import { Button, Skeleton } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import logEvent from 'api/common/logEvent';
 import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
 import ROUTES from 'constants/routes';
@@ -249,9 +250,9 @@ export default function SavedViews({
 								}
 
 								return (
-									<Tag color={tag} key={tag}>
+									<Badge color="sienna" key={tag}>
 										{tag}
-									</Tag>
+									</Badge>
 								);
 							})}
 						</div>

frontend/src/container/InfraMonitoringHosts/constants.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Tag } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import {
@@ -52,14 +52,14 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		label: 'STATUS',
 		getValue: (h): string => (h.active ? 'ACTIVE' : 'INACTIVE'),
 		render: (value, h): React.ReactNode => (
-			<Tag
+			<Badge
+				variant="outline"
 				className={`${infraHostsStyles.infraMonitoringTags} ${
 					h.active ? infraHostsStyles.tagsActive : infraHostsStyles.tagsInactive
 				}`}
-				bordered
 			>
 				{value}
-			</Tag>
+			</Badge>
 		),
 	},
 	{
@@ -67,9 +67,9 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		getValue: (h): string => h.os || '-',
 		render: (value): React.ReactNode =>
 			value !== '-' ? (
-				<Tag className={infraHostsStyles.infraMonitoringTags} bordered>
+				<Badge variant="outline" className={infraHostsStyles.infraMonitoringTags}>
 					{value}
-				</Tag>
+				</Badge>
 			) : (
 				<Typography.Text>-</Typography.Text>
 			),

frontend/src/container/InfraMonitoringHosts/table.config.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Tag, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { HostData } from 'api/infraMonitoring/getHostLists';
 import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { getGroupByEl } from 'container/InfraMonitoringK8s/Base/utils';
@@ -92,14 +93,13 @@ export const hostColumnsConfig: TableColumnDef<HostData>[] = [
 		cell: ({ value }): React.ReactNode => {
 			const active = value as boolean;
 			return (
-				<Tag
-					bordered
+				<Badge
 					className={`${styles.statusTag} ${
 						active ? styles.statusTagActive : styles.statusTagInactive
 					}`}
 				>
 					{active ? 'ACTIVE' : 'INACTIVE'}
-				</Tag>
+				</Badge>
 			);
 		},
 	},

frontend/src/container/InfraMonitoringK8s/Base/K8sHeader.module.scss

@@ -14,7 +14,7 @@
 			font-size: 12px;
 		}
 
-		:global(.ant-tag .ant-typography) {
+		:global([data-slot='badge'] .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.module.scss

@@ -19,7 +19,7 @@
 			font-size: 12px;
 		}
 
-		:global(.ant-tag .ant-typography) {
+		:global([data-slot='badge'] .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.module.scss

@@ -19,7 +19,7 @@
 			font-size: 12px;
 		}
 
-		:global(.ant-tag .ant-typography) {
+		:global([data-slot='badge'] .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.module.scss

@@ -19,7 +19,7 @@
 			font-size: 12px;
 		}
 
-		:global(.ant-tag .ant-typography) {
+		:global([data-slot='badge'] .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/traceListColumns.tsx

@@ -1,4 +1,5 @@
-import { TableColumnsType as ColumnsType, Tag } from 'antd';
+import { TableColumnsType as ColumnsType } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
@@ -93,9 +94,9 @@ export const getTraceListColumns = (
 				if (primaryKey === 'httpMethod' || primaryKey === 'responseStatusCode') {
 					return (
 						<BlockLink to={getTraceLink(itemData)} openInNewTab>
-							<Tag data-testid={key} color="magenta">
+							<Badge data-testid={key} color="sakura">
 								{getValueForKey(itemData, key)}
-							</Tag>
+							</Badge>
 						</BlockLink>
 					);
 				}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/entityDetails.styles.scss

@@ -213,7 +213,7 @@
 					font-size: 12px;
 				}
 
-				.ant-tag .ant-typography {
+				[data-slot='badge'] .ant-typography {
 					font-size: 12px;
 				}
 			}
@@ -349,7 +349,7 @@
 				font-size: 12px;
 			}
 
-			.ant-tag .ant-typography {
+			[data-slot='badge'] .ant-typography {
 				font-size: 12px;
 			}
 		}

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
-	Input,
 	InputNumber,
 	Modal,
 	Row,
@@ -18,7 +18,6 @@ import {
 	Table,
 	TablePaginationConfig,
 	TableProps as AntDTableProps,
-	Tag,
 	Tooltip,
 } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
@@ -41,7 +40,7 @@ import {
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import Tags from 'components/Tags/Tags';
+import Badges from 'components/Badges/Badges';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -1055,7 +1054,10 @@ function MultiIngestionSettings(): JSX.Element {
 													<div className="ingestion-key-tags">
 														{APIKey.tags.map((tag, index) => (
 															// eslint-disable-next-line react/no-array-index-key
-															<Tag key={`${tag}-${index}`}> {tag} </Tag>
+															<Badge key={`${tag}-${index}`} color="vanilla">
+																{' '}
+																{tag}{' '}
+															</Badge>
 														))}
 													</div>
 												</div>
@@ -1834,7 +1836,7 @@ function MultiIngestionSettings(): JSX.Element {
 					</Form.Item>
 
 					<Form.Item name="tags" label="Tags">
-						<Tags tags={updatedTags} setTags={setUpdatedTags} />
+						<Badges tags={updatedTags} setTags={setUpdatedTags} />
 					</Form.Item>
 
 					<Form.Item
@@ -1924,7 +1926,7 @@ function MultiIngestionSettings(): JSX.Element {
 					</Form.Item>
 
 					<Form.Item name="tags" label="Tags">
-						<Tags tags={updatedTags} setTags={setUpdatedTags} />
+						<Badges tags={updatedTags} setTags={setUpdatedTags} />
 					</Form.Item>
 				</Form>
 			</Modal>

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx

@@ -1,4 +1,5 @@
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
 
 function RenderConnectionFields({

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.styles.scss

@@ -94,11 +94,8 @@
 			margin-bottom: 24px;
 			width: 100%;
 
-			.ant-divider::before,
-			.ant-divider::after {
-				border-bottom: 2px dotted var(--l1-border);
-				border-top: 2px dotted var(--l1-border);
-				height: 8px;
+			&__divider {
+				--divider-border-width: 1px;
 			}
 
 			.ant-typography {

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -125,7 +125,7 @@ export function AlertsEmptyState(): JSX.Element {
 					</div>
 				</section>
 				<div className="get-started-text">
-					<Divider>
+					<Divider className="get-started-text__divider">
 						<Typography.Text className="get-started-text">
 							Or get started with these sample alerts
 						</Typography.Text>

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -310,9 +310,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					return <Typography>-</Typography>;
 				}
 
-				return (
-					<LabelColumn labels={withOutSeverityKeys} value={value} color="magenta" />
-				);
+				return <LabelColumn labels={withOutSeverityKeys} value={value} />;
 			},
 		},
 	];

frontend/src/container/ListAlertRules/TableComponents/Status.tsx

@@ -1,26 +1,46 @@
-import { Tag } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
 
 function Status({ status }: StatusProps): JSX.Element {
 	switch (status) {
 		case 'inactive': {
-			return <Tag color="green">OK</Tag>;
+			return (
+				<Badge color="forest" variant="outline">
+					OK
+				</Badge>
+			);
 		}
 
 		case 'pending': {
-			return <Tag color="orange">Pending</Tag>;
+			return (
+				<Badge color="amber" variant="outline">
+					Pending
+				</Badge>
+			);
 		}
 
 		case 'firing': {
-			return <Tag color="red">Firing</Tag>;
+			return (
+				<Badge color="cherry" variant="outline">
+					Firing
+				</Badge>
+			);
 		}
 
 		case 'disabled': {
-			return <Tag>Disabled</Tag>;
+			return (
+				<Badge color="vanilla" variant="outline">
+					Disabled
+				</Badge>
+			);
 		}
 
 		default: {
-			return <Tag color="default">Unknown</Tag>;
+			return (
+				<Badge color="vanilla" variant="outline">
+					Unknown
+				</Badge>
+			);
 		}
 	}
 }

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Button, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,18 +12,10 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
+import { Input } from '@signozhq/ui/input';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import {
-	Button,
-	Flex,
-	Input,
-	Modal,
-	Popover,
-	Skeleton,
-	Table,
-	Tag,
-	Tooltip,
-} from 'antd';
+import { Button, Flex, Modal, Popover, Skeleton, Table, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { TableProps } from 'antd/lib';
@@ -419,15 +411,15 @@ function DashboardsList(): JSX.Element {
 								{dashboard?.tags && dashboard.tags.length > 0 && (
 									<div className="dashboard-tags">
 										{dashboard.tags.slice(0, 3).map((tag) => (
-											<Tag className="tag" key={tag}>
+											<Badge className="tag" color="vanilla" key={tag}>
 												{tag}
-											</Tag>
+											</Badge>
 										))}
 
 										{dashboard.tags.length > 3 && (
-											<Tag className="tag" key={dashboard.tags[3]}>
+											<Badge className="tag" color="vanilla" key={dashboard.tags[3]}>
 												+ <span> {dashboard.tags.length - 3} </span>
-											</Tag>
+											</Badge>
 										)}
 									</div>
 								)}

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Button, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/LogDetailedView/FieldRenderer.styles.ts

@@ -1,7 +1,7 @@
-import { Tag } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import styled from 'styled-components';
 
-export const TagContainer = styled(Tag)`
+export const TagContainer = styled(Badge)`
 	&&& {
 		border-color: var(--bg-slate-400);
 		border-radius: 0.25rem;

frontend/src/container/LogDetailedView/Overview.styles.scss

@@ -84,7 +84,7 @@
 		padding-top: 12px;
 	}
 
-	.ant-tag-borderless {
+	[data-slot='badge'] {
 		border-radius: 2px;
 		background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
 	}

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,9 +2,11 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse, Input, Tag } from 'antd';
+import { Collapse } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
+import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
@@ -105,11 +107,11 @@ function Overview({
 					{
 						key: '1',
 						label: (
-							<Tag bordered={false}>
+							<Badge color="vanilla">
 								<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
 									body
 								</Typography.Text>
-							</Tag>
+							</Badge>
 						),
 						children: (
 							<div className="logs-body-content">
@@ -143,7 +145,7 @@ function Overview({
 								</div>
 							</div>
 						),
-						// extra: <Tag className="tag">JSON</Tag>,
+						// extra: <Badge className="tag" color="vanilla">JSON</Badge>,
 						className: 'collapse-content',
 					},
 				]}
@@ -164,11 +166,11 @@ function Overview({
 								className="attribute-tab-header"
 								onClick={toogleAttributePanelOpenState}
 							>
-								<Tag bordered={false}>
+								<Badge color="vanilla">
 									<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
 										Attributes
 									</Typography.Text>
-								</Tag>
+								</Badge>
 
 								{isAttributesExpanded && (
 									<Button

frontend/src/container/LogExplorerQuerySection/LogsExplorerQuerySection.styles.scss

@@ -11,7 +11,7 @@
 			font-size: 12px;
 		}
 
-		.ant-tag .ant-typography {
+		[data-slot='badge'] .ant-typography {
 			font-size: 12px;
 		}
 	}

frontend/src/container/LogsFilters/index.tsx

@@ -2,7 +2,8 @@ import { ChangeEvent, useCallback, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { CirclePlus, X } from '@signozhq/icons';
-import { Col, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Col } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { AppState } from 'store/reducers';

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -2,7 +2,8 @@ import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { SquareX, X } from '@signozhq/icons';
-import { Button, Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Select } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import {
 	ConditionalOperators,

frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx

@@ -1,6 +1,7 @@
-import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Select } from 'antd';
+// TODO(@signozhq/ui-input): migrate this <Input> once @signozhq/ui Input
+// supports the `onWheel` handler (used to blur on scroll for number inputs).
+import { Input, Select } from 'antd';
 import classNames from 'classnames';
 
 import { TIME_AGGREGATION_OPTIONS } from './constants';

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import type { TableColumnsType as ColumnsType } from 'antd';
-import { Button, Collapse, Input, Select, Spin } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Collapse, Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/container/MySettings/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
-import { Tag } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Switch } from '@signozhq/ui/switch';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -65,9 +65,7 @@ function MySettings(): JSX.Element {
 			label: (
 				<div className="theme-option">
 					<Sun size={12} data-testid="light-theme-icon" /> Light{' '}
-					<Tag bordered={false} color="geekblue">
-						Beta
-					</Tag>
+					<Badge color="robin">Beta</Badge>
 				</div>
 			),
 			value: 'light',

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.styles.scss

@@ -19,9 +19,9 @@
 		letter-spacing: 0.5px;
 	}
 
-	.ant-divider {
-		margin: 8px 0 !important;
-		border: 0.5px solid var(--l1-border);
+	&__divider {
+		--divider-color: var(--l1-border);
+		--divider-margin: 8px 0;
 	}
 
 	.explorer-columns-contents {

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,7 +7,8 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Tooltip } from 'antd';
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -234,7 +235,7 @@ function ExplorerColumnsRenderer({
 					</Tooltip>
 				)}
 			</div>
-			<Divider />
+			<Divider className="explorer-columns-renderer__divider" />
 			{!isError && (
 				<div className="explorer-columns-contents">
 					<DragDropContext onDragEnd={onDragEnd}>

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, Col, Form, Input as AntInput, Input, Row } from 'antd';
+// TODO(@signozhq/ui-input): migrate <Input> once @signozhq/ui Input
+// supports the `spellCheck` prop on the URL input below.
+import { Button, Col, Form, Input, Input as AntInput, Row } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
 import {

frontend/src/container/NewWidget/styles.ts

@@ -1,4 +1,3 @@
-import { Tag as AntDTag } from 'antd';
 import styled from 'styled-components';
 
 export const Container = styled.div`
@@ -19,7 +18,3 @@ export const PanelContainer = styled.div`
 	display: flex;
 	overflow-y: auto;
 `;
-
-export const Tag = styled(AntDTag)`
-	margin: 0;
-`;

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocks, Check, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Server, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Plus, Trash2 } from '@signozhq/icons';
-import { Button, Form, FormInstance, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, FormInstance, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { ProcessorFormField } from '../../AddNewProcessor/config';
 import { formValidationRules } from '../../config';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/CSVInput.tsx

@@ -1,4 +1,6 @@
 import { ChangeEventHandler, useState } from 'react';
+// TODO(@signozhq/ui-input): migrate to @signozhq/ui Input once the antd
+// `InputProps` spread (`size`, etc.) is no longer needed on this wrapper.
 import { Input, InputProps } from 'antd';
 
 function CSVInput({ value, onChange, ...otherProps }: InputProps): JSX.Element {

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Flex, Form, Input, Space, Tooltip } from 'antd';
+import { Flex, Form, Space, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
+import { Form, Select, Space } from 'antd';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';
 

frontend/src/container/PipelinePage/PipelineListsView/TableComponents/Tags.tsx

@@ -1,12 +1,12 @@
-import { Tag } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 
 function Tags({ tags }: TagsProps): JSX.Element {
 	return (
 		<span>
 			{tags?.map((tag) => (
-				<Tag color="magenta" key={tag}>
+				<Badge color="sakura" key={tag}>
 					{tag}
-				</Tag>
+				</Badge>
 			))}
 		</span>
 	);

frontend/src/container/PipelinePage/components/TagInput.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleX } from '@signozhq/icons';
-import { Button, Input, InputRef, message, Modal, Tag, Tooltip } from 'antd';
+import { Button, Input, InputRef, message, Modal, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 
 import { tagInputStyle } from '../PipelineListsView/config';
 import { TagInputWrapper } from './styles';
@@ -90,22 +91,26 @@ function TagInput({
 		}
 		const isLongTag = tag.length > 20;
 		const tagElem = (
-			<Tag
+			<Badge
 				key={tag}
-				closable
+				color="vanilla"
 				style={{ userSelect: 'none' }}
-				onClose={handleClose(tag)}
+				closable
+				onClose={(e): void => {
+					e.preventDefault();
+					handleClose(tag)();
+				}}
 			>
 				<span
-					onDoubleClick={(e): void => {
+					onDoubleClick={(ev): void => {
 						setEditInputIndex(index);
 						setEditInputValue(tag);
-						e.preventDefault();
+						ev.preventDefault();
 					}}
 				>
 					{isLongTag ? `${tag.slice(0, 20)}...` : tag}
 				</span>
-			</Tag>
+			</Badge>
 		);
 		return isLongTag ? (
 			<Tooltip title={tag} key={tag}>

frontend/src/container/PipelinePage/tests/__snapshots__/Tags.test.tsx.snap

@@ -4,12 +4,20 @@ exports[`PipelinePage container test should render Tags section 1`] = `
 <DocumentFragment>
   <span>
     <span
-      class="ant-tag ant-tag-magenta css-dev-only-do-not-override-2i2tap"
+      class="_badge_1etd5_1"
+      data-capitalize="false"
+      data-color="sakura"
+      data-slot="badge"
+      data-variant="default"
     >
       server
     </span>
     <span
-      class="ant-tag ant-tag-magenta css-dev-only-do-not-override-2i2tap"
+      class="_badge_1etd5_1"
+      data-capitalize="false"
+      data-color="sakura"
+      data-slot="badge"
+      data-variant="default"
     >
       app
     </span>

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -19,12 +19,6 @@
 			}
 		}
 
-		.ant-modal-body {
-			.ant-divider {
-				margin: 16px 0;
-				border: 0.5px solid var(--l1-border);
-			}
-		}
 		.downtime-schedule-btn {
 			display: flex;
 		}
@@ -53,12 +47,6 @@
 		margin-bottom: 8px;
 		overflow: auto;
 		max-height: 100px;
-		.ant-tag {
-			user-select: none;
-			height: 28px;
-			display: inline-flex;
-			align-items: center;
-		}
 	}
 
 	.ant-select {
@@ -109,61 +97,8 @@
 }
 
 .alert-rule-tags {
-	.ant-tag {
-		display: flex;
-		align-items: center;
-		border: 1px solid color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		padding-right: 0px;
-		border-right: 0;
-		color: var(--bg-robin-400);
-
-		.ant-tag-close-icon {
-			height: 28px;
-			width: 20px !important;
-			justify-content: center;
-			border-left: 1px solid
-				color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
-			border-radius: 0px 2px 2px 0px;
-			background: color-mix(in srgb, var(--bg-robin-400) 30%, transparent);
-			border-right: 1px solid
-				color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
-			margin-right: 0px;
-
-			svg {
-				fill: var(--primary-background);
-			}
-		}
-	}
 	.non-closable-tag {
 		padding-right: 7px;
-		border-right: 1px solid
-			color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
-	}
-
-	.red-tag.non-closable-tag {
-		border-right: 1px solid
-			color-mix(in srgb, var(--bg-sakura-500) 20%, transparent) !important;
-	}
-
-	.red-tag {
-		border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
-		background: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
-		border-right: 0;
-		color: var(--bg-sakura-400);
-
-		.ant-tag-close-icon {
-			background: color-mix(in srgb, var(--bg-sakura-500) 30%, transparent);
-			border-left: 1px solid
-				color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
-			border-right: 1px solid
-				color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
-
-			svg {
-				fill: var(--bg-sakura-500);
-			}
-		}
 	}
 }
 
@@ -271,9 +206,6 @@
 				line-height: 18px;
 				letter-spacing: -0.07px;
 			}
-			.ant-tag {
-				border-radius: 20px;
-			}
 
 			.action-btn {
 				display: flex;
@@ -328,12 +260,6 @@
 				width: 540px;
 				max-height: 100px;
 				overflow: auto;
-
-				.ant-tag {
-					height: 28px;
-					display: flex;
-					align-items: center;
-				}
 			}
 			.ant-collapse-content-active {
 				border-top: 0;

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -2,7 +2,8 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Form, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Form, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useDeleteDowntimeScheduleByID,

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -1,7 +1,8 @@
 import React, { ReactNode, useEffect } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Collapse, Flex, Space, Table, TableProps, Tag, Tooltip } from 'antd';
+import { Collapse, Flex, Space, Table, TableProps, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import type {
@@ -48,21 +49,24 @@ export function AlertRuleTags(props: AlertRuleTagsProps): JSX.Element {
 			{selectedTags?.map((tag: DefaultOptionType, index: number) => {
 				const isLongTag = (tag?.label as string)?.length > 20;
 				const tagElem = (
-					<Tag
+					<Badge
 						key={tag.value}
-						onClose={(): void => handleClose?.(tag?.value)}
-						closable={closable}
+						color={index % 2 ? 'sakura' : 'robin'}
+						variant="outline"
 						className={cx(
 							{ 'red-tag': index % 2 },
 							{ 'non-closable-tag': !closable },
 						)}
+						closable={closable}
+						onClose={(e): void => {
+							e.preventDefault();
+							handleClose?.(tag?.value);
+						}}
 					>
-						<span>
-							{isLongTag
-								? `${(tag?.label as string | null)?.slice(0, 20)}...`
-								: tag?.label}
-						</span>
-					</Tag>
+						{isLongTag
+							? `${(tag?.label as string | null)?.slice(0, 20)}...`
+							: tag?.label}
+					</Badge>
 				);
 				return isLongTag ? (
 					<Tooltip title={tag?.label} key={tag?.value}>
@@ -93,7 +97,7 @@ function HeaderComponent({
 		<Flex className="header-content" justify="space-between">
 			<Flex gap={8}>
 				<Typography>{name}</Typography>
-				<Tag>{duration}</Tag>
+				<Badge color="vanilla">{duration}</Badge>
 			</Flex>
 
 			{isCrudEnabled && (
@@ -155,9 +159,7 @@ export function CollapseListContent({
 				created_by_name ? (
 					<Flex gap={8}>
 						<Typography>{created_by_name}</Typography>
-						{created_by_email && (
-							<Tag style={{ borderRadius: 20 }}>{created_by_email}</Tag>
-						)}
+						{created_by_email && <Badge color="vanilla">{created_by_email}</Badge>}
 					</Flex>
 				) : (
 					'-'
@@ -204,7 +206,9 @@ export function CollapseListContent({
 						selectedTags={alertOptions}
 					/>
 				) : (
-					<Tag className="all-alerts-tag">All alert rules</Tag>
+					<Badge className="all-alerts-tag" color="vanilla">
+						All alert rules
+					</Badge>
 				),
 			)}
 		</Flex>

frontend/src/container/QueryBuilder/components/Formula/Formula.styles.scss

@@ -8,4 +8,16 @@
 	grid-template-columns: 60% 35%;
 	justify-content: space-between;
 	gap: 16px;
+
+	.input-with-label {
+		.label {
+			box-sizing: border-box;
+			height: 36px;
+		}
+
+		.input {
+			box-sizing: border-box;
+			height: 36px;
+		}
+	}
 }