feat: lay out the V2 page

* feat: lock, unlock, create public, update public v2 dashboard APIs

* feat: delete dashboard v2 API and hard delete cron job

* feat: patch dashboard api

* chore: update api specs

* chore: update api specs

* chore: update api specs

* chore: remove delete related work

* fix: add examples of structs for value param in param description

* test: unit test fixes

* fix: use new pattern of checking for admin permission

* fix: remove soft delete reference

* test: key value tags in test

* fix: build error in patch module method

* fix: build error in Apply method

* fix: use sync tags method in update

* fix: fix build errors

* fix: fix all patch application tests

* chore: add more mapper methods

cmd/community/server.go

@@ -33,6 +33,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
+	"github.com/SigNoz/signoz/pkg/modules/tag"
 	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/app"
@@ -100,8 +101,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
-			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module) dashboard.Module {
+			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, tagModule)
 		},
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()

cmd/enterprise/server.go

@@ -46,6 +46,7 @@ import (
 	pkgcloudintegration "github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
+	"github.com/SigNoz/signoz/pkg/modules/tag"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
@@ -133,8 +134,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 			}
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
-			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
+			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), store, settings, analytics, orgGetter, queryParser, querier, licensing, tagModule)
 		},
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)

ee/modules/dashboard/impldashboard/module.go

@@ -11,8 +11,10 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/tag"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
@@ -30,9 +32,9 @@ type module struct {
 	licensing          licensing.Licensing
 }
 
-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
+func NewModule(store dashboardtypes.Store, sqlstore sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard")
-	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser)
+	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser, tagModule)
 
 	return &module{
 		pkgDashboardModule: pkgDashboardModule,
@@ -225,6 +227,38 @@ func (module *module) Create(ctx context.Context, orgID valuer.UUID, createdBy s
 	return module.pkgDashboardModule.Create(ctx, orgID, createdBy, creator, data)
 }
 
+func (module *module) CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.CreateV2(ctx, orgID, createdBy, creator, postable)
+}
+
+func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
+}
+
+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updateable dashboardtypes.UpdateableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updateable)
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlockV2(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
+func (module *module) ListV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, params *dashboardtypes.ListDashboardsV2Params) (*dashboardtypes.ListableDashboardV2, error) {
+	return module.pkgDashboardModule.ListV2(ctx, orgID, userID, params)
+}
+
+func (module *module) PinV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, id valuer.UUID) error {
+	return module.pkgDashboardModule.PinV2(ctx, orgID, userID, id)
+}
+
+func (module *module) UnpinV2(ctx context.Context, userID valuer.UUID, id valuer.UUID) error {
+	return module.pkgDashboardModule.UnpinV2(ctx, userID, id)
+}
+
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }

ee/sqlstore/postgressqlstore/listfilter_test.go

@@ -0,0 +1,65 @@
+package postgressqlstore
+
+// Lives in this package (rather than the listfilter package) so it can use
+// the unexported newFormatter constructor without driving a real Postgres
+// connection. Covers the only listfilter cases whose emitted SQL differs
+// between SQLite and Postgres — the ones that go through JSONExtractString
+// (`name`, `description`). All other operators (=, !=, BETWEEN, LIKE, IN,
+// EXISTS, lower(...)) emit identical ANSI SQL on both dialects and are
+// covered by the SQLite tests in the listfilter package itself.
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+	"github.com/uptrace/bun/dialect/pgdialect"
+
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes/listfilter"
+)
+
+func TestListFilterCompile_Postgres(t *testing.T) {
+	f := newFormatter(pgdialect.New())
+
+	cases := []struct {
+		name     string
+		query    string
+		wantSQL  string
+		wantArgs []any
+	}{
+		{
+			name:     "name = uses Postgres -> / ->> chain",
+			query:    `name = 'overview'`,
+			wantSQL:  `"dashboard"."data"->'data'->'display'->>'name' = ?`,
+			wantArgs: []any{"overview"},
+		},
+		{
+			name:     "name CONTAINS — same JSON path, LIKE pattern",
+			query:    `name CONTAINS 'overview'`,
+			wantSQL:  `"dashboard"."data"->'data'->'display'->>'name' LIKE ?`,
+			wantArgs: []any{"%overview%"},
+		},
+		{
+			name:     "name ILIKE — LOWER wraps the JSON path",
+			query:    `name ILIKE 'Prod%'`,
+			wantSQL:  `lower("dashboard"."data"->'data'->'display'->>'name') LIKE LOWER(?)`,
+			wantArgs: []any{"Prod%"},
+		},
+		{
+			name:     "description = follows the same path shape",
+			query:    `description = 'd1'`,
+			wantSQL:  `"dashboard"."data"->'data'->'display'->>'description' = ?`,
+			wantArgs: []any{"d1"},
+		},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			out, err := listfilter.Compile(c.query, f)
+			require.NoError(t, err)
+			require.NotNil(t, out)
+			assert.Equal(t, c.wantSQL, out.SQL)
+			assert.Equal(t, c.wantArgs, out.Args)
+		})
+	}
+}

frontend/package.json

@@ -49,7 +49,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.20",
+    "@signozhq/ui": "0.0.19",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -241,4 +241,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

frontend/pnpm-lock.yaml

@@ -77,8 +77,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.20
-        version: 0.0.20(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.19
+        version: 0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3269,8 +3269,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.20':
-    resolution: {integrity: sha512-rVC8OMfM1AsjsrWJWNzU8KlSw3hbWP5OF/jxuX3zQ5Fljo9PhtLksUF3jISfwLqbmWOBCopByr9UlKH46iAfYA==}
+  '@signozhq/ui@0.0.19':
+    resolution: {integrity: sha512-2q6aRxN/PR4PlR2xJZAREEuvLPiDFggfFKzCW2Z5vHVVbrgnvZHWD1jPUuwszfEg0ceH3UvkwqceO7wN4uRJAA==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -3851,6 +3851,27 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
+  '@webassemblyjs/ast@1.14.1':
+    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+
+  '@webassemblyjs/floating-point-hex-parser@1.13.2':
+    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+
+  '@webassemblyjs/helper-api-error@1.13.2':
+    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+
+  '@webassemblyjs/helper-buffer@1.14.1':
+    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+
+  '@webassemblyjs/helper-numbers@1.13.2':
+    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
+    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
+
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
+
   '@xmldom/xmldom@0.8.13':
     resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==}
     engines: {node: '>=10.0.0'}
@@ -12013,7 +12034,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.20(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

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

@@ -18,18 +18,32 @@ import type {
 } from 'react-query';
 
 import type {
+	CreateDashboardV2201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
+	DashboardtypesJSONPatchDocumentDTO,
+	DashboardtypesPostableDashboardV2DTO,
 	DashboardtypesPostablePublicDashboardDTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
 	DeletePublicDashboardPathParameters,
+	GetDashboardV2200,
+	GetDashboardV2PathParameters,
 	GetPublicDashboard200,
 	GetPublicDashboardData200,
 	GetPublicDashboardDataPathParameters,
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	ListDashboardsV2200,
+	LockDashboardV2PathParameters,
+	PatchDashboardV2200,
+	PatchDashboardV2PathParameters,
+	PinDashboardV2PathParameters,
 	RenderErrorResponseDTO,
+	UnlockDashboardV2PathParameters,
+	UnpinDashboardV2PathParameters,
+	UpdateDashboardV2200,
+	UpdateDashboardV2PathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
@@ -628,3 +642,786 @@ export const invalidateGetPublicDashboardWidgetQueryRange = async (
 
 	return queryClient;
 };
+
+/**
+ * Returns a page of v2-shape dashboards for the calling user's org. Supports a filter DSL (`query`), sort (`updated_at`/`created_at`/`title`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). Pinned dashboards float to the top of each page.
+ * @summary List dashboards (v2)
+ */
+export const listDashboardsV2 = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListDashboardsV2200>({
+		url: `/api/v2/dashboards`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListDashboardsV2QueryKey = () => {
+	return [`/api/v2/dashboards`] as const;
+};
+
+export const getListDashboardsV2QueryOptions = <
+	TData = Awaited<ReturnType<typeof listDashboardsV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listDashboardsV2>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListDashboardsV2QueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listDashboardsV2>>> = ({
+		signal,
+	}) => listDashboardsV2(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listDashboardsV2>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListDashboardsV2QueryResult = NonNullable<
+	Awaited<ReturnType<typeof listDashboardsV2>>
+>;
+export type ListDashboardsV2QueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List dashboards (v2)
+ */
+
+export function useListDashboardsV2<
+	TData = Awaited<ReturnType<typeof listDashboardsV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listDashboardsV2>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListDashboardsV2QueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List dashboards (v2)
+ */
+export const invalidateListDashboardsV2 = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListDashboardsV2QueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates a v2-shape dashboard with structured metadata, a typed data tree, and resolved tags.
+ * @summary Create dashboard (v2)
+ */
+export const createDashboardV2 = (
+	dashboardtypesPostableDashboardV2DTO?: BodyType<DashboardtypesPostableDashboardV2DTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateDashboardV2201>({
+		url: `/api/v2/dashboards`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesPostableDashboardV2DTO,
+		signal,
+	});
+};
+
+export const getCreateDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createDashboardV2>>,
+		TError,
+		{ data?: BodyType<DashboardtypesPostableDashboardV2DTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createDashboardV2>>,
+	TError,
+	{ data?: BodyType<DashboardtypesPostableDashboardV2DTO> },
+	TContext
+> => {
+	const mutationKey = ['createDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof createDashboardV2>>,
+		{ data?: BodyType<DashboardtypesPostableDashboardV2DTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createDashboardV2(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof createDashboardV2>>
+>;
+export type CreateDashboardV2MutationBody =
+	| BodyType<DashboardtypesPostableDashboardV2DTO>
+	| undefined;
+export type CreateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create dashboard (v2)
+ */
+export const useCreateDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createDashboardV2>>,
+		TError,
+		{ data?: BodyType<DashboardtypesPostableDashboardV2DTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createDashboardV2>>,
+	TError,
+	{ data?: BodyType<DashboardtypesPostableDashboardV2DTO> },
+	TContext
+> => {
+	return useMutation(getCreateDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint returns a v2-shape dashboard with its tags and public sharing config (if any).
+ * @summary Get dashboard (v2)
+ */
+export const getDashboardV2 = (
+	{ id }: GetDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetDashboardV2200>({
+		url: `/api/v2/dashboards/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetDashboardV2QueryKey = ({
+	id,
+}: GetDashboardV2PathParameters) => {
+	return [`/api/v2/dashboards/${id}`] as const;
+};
+
+export const getGetDashboardV2QueryOptions = <
+	TData = Awaited<ReturnType<typeof getDashboardV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetDashboardV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getDashboardV2>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetDashboardV2QueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getDashboardV2>>> = ({
+		signal,
+	}) => getDashboardV2({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getDashboardV2>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetDashboardV2QueryResult = NonNullable<
+	Awaited<ReturnType<typeof getDashboardV2>>
+>;
+export type GetDashboardV2QueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get dashboard (v2)
+ */
+
+export function useGetDashboardV2<
+	TData = Awaited<ReturnType<typeof getDashboardV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetDashboardV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getDashboardV2>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetDashboardV2QueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get dashboard (v2)
+ */
+export const invalidateGetDashboardV2 = async (
+	queryClient: QueryClient,
+	{ id }: GetDashboardV2PathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetDashboardV2QueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Locked dashboards are rejected.
+ * @summary Patch dashboard (v2)
+ */
+export const patchDashboardV2 = (
+	{ id }: PatchDashboardV2PathParameters,
+	dashboardtypesJSONPatchDocumentDTONull?: BodyType<DashboardtypesJSONPatchDocumentDTO | null> | null,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PatchDashboardV2200>({
+		url: `/api/v2/dashboards/${id}`,
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesJSONPatchDocumentDTONull,
+		signal,
+	});
+};
+
+export const getPatchDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		TError,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof patchDashboardV2>>,
+	TError,
+	{
+		pathParams: PatchDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
+	},
+	TContext
+> => {
+	const mutationKey = ['patchDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return patchDashboardV2(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PatchDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof patchDashboardV2>>
+>;
+export type PatchDashboardV2MutationBody =
+	| BodyType<DashboardtypesJSONPatchDocumentDTO | null>
+	| undefined;
+export type PatchDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Patch dashboard (v2)
+ */
+export const usePatchDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		TError,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof patchDashboardV2>>,
+	TError,
+	{
+		pathParams: PatchDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
+	},
+	TContext
+> => {
+	return useMutation(getPatchDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.
+ * @summary Update dashboard (v2)
+ */
+export const updateDashboardV2 = (
+	{ id }: UpdateDashboardV2PathParameters,
+	dashboardtypesPostableDashboardV2DTO?: BodyType<DashboardtypesPostableDashboardV2DTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateDashboardV2200>({
+		url: `/api/v2/dashboards/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesPostableDashboardV2DTO,
+		signal,
+	});
+};
+
+export const getUpdateDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		TError,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateDashboardV2>>,
+	TError,
+	{
+		pathParams: UpdateDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateDashboardV2(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateDashboardV2>>
+>;
+export type UpdateDashboardV2MutationBody =
+	| BodyType<DashboardtypesPostableDashboardV2DTO>
+	| undefined;
+export type UpdateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update dashboard (v2)
+ */
+export const useUpdateDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		TError,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateDashboardV2>>,
+	TError,
+	{
+		pathParams: UpdateDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
+ * @summary Unlock dashboard (v2)
+ */
+export const unlockDashboardV2 = (
+	{ id }: UnlockDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/lock`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getUnlockDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		TError,
+		{ pathParams: UnlockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof unlockDashboardV2>>,
+	TError,
+	{ pathParams: UnlockDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['unlockDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		{ pathParams: UnlockDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return unlockDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UnlockDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof unlockDashboardV2>>
+>;
+
+export type UnlockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Unlock dashboard (v2)
+ */
+export const useUnlockDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		TError,
+		{ pathParams: UnlockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof unlockDashboardV2>>,
+	TError,
+	{ pathParams: UnlockDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getUnlockDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
+ * @summary Lock dashboard (v2)
+ */
+export const lockDashboardV2 = (
+	{ id }: LockDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/lock`,
+		method: 'PUT',
+		signal,
+	});
+};
+
+export const getLockDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		TError,
+		{ pathParams: LockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof lockDashboardV2>>,
+	TError,
+	{ pathParams: LockDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['lockDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		{ pathParams: LockDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return lockDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type LockDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof lockDashboardV2>>
+>;
+
+export type LockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Lock dashboard (v2)
+ */
+export const useLockDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		TError,
+		{ pathParams: LockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof lockDashboardV2>>,
+	TError,
+	{ pathParams: LockDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getLockDashboardV2MutationOptions(options));
+};
+/**
+ * Removes the pin for the calling user. Idempotent — unpinning a dashboard that wasn't pinned still returns 204.
+ * @summary Unpin a dashboard for the current user (v2)
+ */
+export const unpinDashboardV2 = (
+	{ id }: UnpinDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/pins/me`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getUnpinDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unpinDashboardV2>>,
+		TError,
+		{ pathParams: UnpinDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof unpinDashboardV2>>,
+	TError,
+	{ pathParams: UnpinDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['unpinDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof unpinDashboardV2>>,
+		{ pathParams: UnpinDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return unpinDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UnpinDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof unpinDashboardV2>>
+>;
+
+export type UnpinDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Unpin a dashboard for the current user (v2)
+ */
+export const useUnpinDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unpinDashboardV2>>,
+		TError,
+		{ pathParams: UnpinDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof unpinDashboardV2>>,
+	TError,
+	{ pathParams: UnpinDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getUnpinDashboardV2MutationOptions(options));
+};
+/**
+ * Pins the dashboard for the calling user. A user can pin at most 10 dashboards; pinning when at the limit returns 409. Re-pinning an already-pinned dashboard is a no-op success.
+ * @summary Pin a dashboard for the current user (v2)
+ */
+export const pinDashboardV2 = (
+	{ id }: PinDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/pins/me`,
+		method: 'PUT',
+		signal,
+	});
+};
+
+export const getPinDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof pinDashboardV2>>,
+		TError,
+		{ pathParams: PinDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof pinDashboardV2>>,
+	TError,
+	{ pathParams: PinDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['pinDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof pinDashboardV2>>,
+		{ pathParams: PinDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return pinDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PinDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof pinDashboardV2>>
+>;
+
+export type PinDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Pin a dashboard for the current user (v2)
+ */
+export const usePinDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof pinDashboardV2>>,
+		TError,
+		{ pathParams: PinDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof pinDashboardV2>>,
+	TError,
+	{ pathParams: PinDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getPinDashboardV2MutationOptions(options));
+};

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import { Loader, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
+	Button,
 	Flex,
 	Input,
 	InputRef,
@@ -16,7 +17,6 @@ import {
 	Tooltip,
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {
@@ -105,8 +105,9 @@ const getColumnSearchProps = (
 			/>
 			<Space>
 				<Button
+					type="primary"
+					size="small"
 					onClick={(): void => handleSearch(selectedKeys as string[], confirm)}
-					size="sm"
 				>
 					<Flex align="center" gap={4}>
 						<Search size="md" />
@@ -115,19 +116,17 @@ const getColumnSearchProps = (
 				</Button>
 				<Button
 					onClick={(): void => clearFilters && handleReset(clearFilters, confirm)}
+					size="small"
 					style={{ width: 90 }}
-					size="sm"
-					variant="outlined"
-					color="secondary"
 				>
 					Reset
 				</Button>
 				<Button
+					type="link"
+					size="small"
 					onClick={(): void => {
 						close();
 					}}
-					size="sm"
-					variant="link"
 				>
 					close
 				</Button>

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { Check, ChevronsDown, ScrollText, X } from '@signozhq/icons';
-import { Flex, Modal } from 'antd';
+import { Button, Flex, Modal } from 'antd';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import cx from 'classnames';
 import { USER_PREFERENCES } from 'constants/userPreferences';
@@ -14,7 +14,6 @@ import { UserPreference } from 'types/api/preferences/preference';
 import ChangelogRenderer from './components/ChangelogRenderer';
 
 import './ChangelogModal.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 interface Props {
 	changelog: ChangelogSchema;
@@ -116,13 +115,13 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 				>
 					{!isCloudUser && (
 						<div className="changelog-modal-footer-ctas">
-							<Button onClick={onClose} variant="outlined" color="secondary">
+							<Button type="default" onClick={onClose}>
 								<Flex align="center" gap="4px">
 									<X size="md" />
 									Skip for now
 								</Flex>
 							</Button>
-							<Button onClick={onClickUpdateWorkspace}>
+							<Button type="primary" onClick={onClickUpdateWorkspace}>
 								<Flex align="center" gap="4px">
 									<Check size="md" />
 									Update my workspace

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Modal } from 'antd';
+import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
@@ -73,8 +72,6 @@ export default function ChatSupportGateway(): JSX.Element {
 
 						setIsAddCreditCardModalOpen(true);
 					}}
-					variant="outlined"
-					color="secondary"
 				>
 					<MessageSquareText size={24} />
 				</Button>
@@ -93,19 +90,19 @@ export default function ChatSupportGateway(): JSX.Element {
 						key="cancel"
 						onClick={(): void => setIsAddCreditCardModalOpen(false)}
 						className="cancel-btn"
-						variant="outlined"
-						color="secondary"
-						prefix={<X size={16} />}
+						icon={<X size={16} />}
 					>
 						Cancel
 					</Button>,
 					<Button
 						key="submit"
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
 						loading={isLoadingBilling}
 						disabled={isLoadingBilling}
 						onClick={handleAddCreditCard}
 						className="add-credit-card-btn"
-						prefix={<CreditCard size={16} />}
 					>
 						Add Credit Card
 					</Button>,

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -137,6 +137,7 @@ function CreateServiceAccountModal(): JSX.Element {
 				<AuthZTooltip checks={[SACreatePermission]}>
 					<Button
 						type="submit"
+						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form="create-sa-form"
 						variant="solid"
 						color="primary"

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,5 +1,5 @@
 import { Calendar } from '@signozhq/ui/calendar';
-import { Button } from '@signozhq/ui/button';
+import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { Calendar as CalendarIcon, Check, X } from '@signozhq/icons';
@@ -78,20 +78,18 @@ function CalendarContainer({
 
 				<div className="calendar-actions">
 					<Button
-						className="cancel-btn"
+						type="primary"
+						className="periscope-btn secondary cancel-btn"
 						onClick={onCancel}
-						prefix={<X size={12} />}
-						variant="outlined"
-						color="secondary"
+						icon={<X size={12} />}
 					>
 						Cancel
 					</Button>
 					<Button
-						className="apply-btn"
+						type="primary"
+						className="periscope-btn primary apply-btn"
 						onClick={onApply}
-						prefix={<Check size={12} />}
-						variant="solid"
-						color="primary"
+						icon={<Check size={12} />}
 					>
 						Apply
 					</Button>

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

@@ -108,7 +108,7 @@
 }
 
 .info-text:hover {
-	& {
+	&.ant-btn-text {
 		background-color: unset !important;
 	}
 }

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -31,7 +32,6 @@ import TimezonePicker from './TimezonePicker';
 import { Timezone } from './timezoneUtils';
 
 import './CustomTimePicker.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 const TO_MILLISECONDS_FACTOR = 1000_000;
 
@@ -177,14 +177,13 @@ function CustomTimePickerPopoverContent({
 			<div className="relative-date-time-section">
 				{options.map((option) => (
 					<Button
+						type="text"
 						className="time-btns"
 						key={option.label + option.value}
 						onClick={(): void => {
 							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
 						}}
-						variant="ghost"
-						color="secondary"
 					>
 						{option.label}
 					</Button>
@@ -250,15 +249,15 @@ function CustomTimePickerPopoverContent({
 					{isLogsExplorerPage && isLogsListView && (
 						<Button
 							className={cx('data-time-live', isLiveLogsEnabled ? 'active' : '')}
+							type="text"
 							onClick={handleGoLive}
-							variant="ghost"
-							color="secondary"
 						>
 							Live
 						</Button>
 					)}
 					{options.map((option) => (
 						<Button
+							type="text"
 							key={option.label + option.value}
 							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
 								e.stopPropagation();
@@ -272,8 +271,6 @@ function CustomTimePickerPopoverContent({
 									? option.value === 'custom' && !isLiveLogsEnabled && 'active'
 									: selectedTime === option.value && !isLiveLogsEnabled && 'active',
 							)}
-							variant="ghost"
-							color="secondary"
 						>
 							<span className="time-label">{option.label}</span>
 
@@ -373,12 +370,11 @@ function CustomTimePickerPopoverContent({
 
 					<div className="timezone-container__right">
 						<Button
-							className="timezone-change-button"
+							type="text"
+							size="small"
+							className="periscope-btn text timezone-change-button"
 							onClick={handleTimezoneHintClick}
-							size="sm"
-							variant="ghost"
-							prefix={<PenLine size={10} />}
-							color="none"
+							icon={<PenLine size={10} />}
 						>
 							Change Timezone
 						</Button>

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -106,7 +106,7 @@ describe.each([
 		renderWithStore(dataSource);
 		const button = screen.getByTestId(testId);
 		expect(button).toBeInTheDocument();
-		expect(button).not.toBeDisabled();
+		expect(button).toHaveClass('periscope-btn', 'ghost');
 	});
 
 	it('shows popover with export options when download button is clicked', () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Popover, Radio, Tooltip } from 'antd';
+import { Button, Popover, Radio, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
 import { Download, LoaderCircle } from '@signozhq/icons';
@@ -105,11 +104,12 @@ export default function DownloadOptionsMenu({
 				)}
 
 				<Button
+					type="primary"
+					icon={<Download size={16} />}
 					onClick={handleExport}
 					className="export-button"
 					disabled={isDownloading}
 					loading={isDownloading}
-					prefix={<Download size={16} />}
 				>
 					Export
 				</Button>
@@ -137,18 +137,16 @@ export default function DownloadOptionsMenu({
 		>
 			<Tooltip title="Download" placement="top">
 				<Button
-					data-testid={`periscope-btn-download-${dataSource}`}
-					disabled={isDownloading}
-					variant="outlined"
-					color="secondary"
-					size="icon"
-					prefix={
+					className="periscope-btn ghost"
+					icon={
 						isDownloading ? (
 							<LoaderCircle size={14} className="animate-spin" />
 						) : (
 							<Download size={14} />
 						)
 					}
+					data-testid={`periscope-btn-download-${dataSource}`}
+					disabled={isDownloading}
 				/>
 			</Tooltip>
 		</Popover>

frontend/src/components/DropDown/DropDown.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { Ellipsis } from '@signozhq/icons';
-import { Dropdown, MenuProps } from 'antd';
+import { Button, Dropdown, MenuProps } from 'antd';
 
 import './DropDown.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function DropDown({
 	element,
@@ -32,12 +31,12 @@ function DropDown({
 			open={isDdOpen}
 		>
 			<Button
+				type="link"
 				className={`dropdown-button`}
 				onClick={(e): void => {
 					e.preventDefault();
 					setDdOpen(true);
 				}}
-				variant="link"
 			>
 				<Ellipsis className="dropdown-icon" size={16} />
 			</Button>

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Modal, Tag } from 'antd';
+import { Button, Modal, Tag } from 'antd';
 import { CircleAlert, X } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
@@ -9,7 +9,6 @@ import APIError from 'types/api/error';
 import ErrorContent from './components/ErrorContent';
 
 import './ErrorModal.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 type Props = {
 	error: APIError;
@@ -74,11 +73,10 @@ function ErrorModal({
 							<div className="error-modal__version-placeholder" />
 						)}
 						<Button
+							type="default"
 							className="close-button"
 							onClick={handleClose}
 							data-testid="close-button"
-							variant="outlined"
-							color="secondary"
 						>
 							<X size={16} color={Color.BG_VANILLA_400} />
 						</Button>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,8 +1,16 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Col, Dropdown, MenuProps, Popover, Row, Select, Space } from 'antd';
+import {
+	Button,
+	Col,
+	Dropdown,
+	MenuProps,
+	Popover,
+	Row,
+	Select,
+	Space,
+} from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -151,6 +159,7 @@ function ExplorerCard({
 		],
 	};
 
+	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
 	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
 
 	const showSaveView = false;
@@ -201,7 +210,7 @@ function ExplorerCard({
 									</Space>
 								)}
 								{isQueryUpdated && (
-									<Button onClick={onUpdateQueryHandler} prefix={<Save />}>
+									<Button type="primary" icon={<Save />} onClick={onUpdateQueryHandler}>
 										Save changes
 									</Button>
 								)}
@@ -221,10 +230,9 @@ function ExplorerCard({
 									onOpenChange={handleOpenChange}
 								>
 									<Button
+										type={saveButtonType}
+										icon={saveButtonIcon}
 										data-testid="traces-save-view-action"
-										variant="outlined"
-										color="secondary"
-										prefix={saveButtonIcon ?? undefined}
 									>
 										{isQueryUpdated
 											? SaveButtonText.SAVE_AS_NEW_VIEW

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -54,7 +54,7 @@ function SortableField({
 				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
 			<Button
-				className={styles.removeBtn}
+				className={cx(styles.removeBtn, 'periscope-btn')}
 				variant="outlined"
 				color="destructive"
 				size="sm"

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -89,7 +89,7 @@ function OtherFields({
 									<span className={styles.fieldKey}>{attr.name}</span>
 									{!isAtLimit && (
 										<Button
-											className={styles.addBtn}
+											className={cx(styles.addBtn, 'periscope-btn')}
 											variant="outlined"
 											color="secondary"
 											size="sm"

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
-import { Input, Radio, RadioChangeEvent } from 'antd';
+import { Button, Input, Radio, RadioChangeEvent } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -126,11 +125,11 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 
 			<div className="feedback-modal-content-footer">
 				<Button
+					className="periscope-btn primary"
+					type="primary"
 					onClick={handleSubmit}
 					loading={isLoading}
 					disabled={feedback.length === 0}
-					variant="solid"
-					color="primary"
 				>
 					Submit
 				</Button>

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -141,7 +141,6 @@ function HeaderRightSection({
 				>
 					<Button
 						variant="ghost"
-						color="secondary"
 						size="icon"
 						className="share-feedback-btn"
 						aria-label="Feedback"
@@ -165,15 +164,14 @@ function HeaderRightSection({
 				>
 					<Button
 						variant="ghost"
-						color="secondary"
 						size="icon"
 						aria-label="Announcements"
+						prefix={<Inbox size={14} />}
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
 							});
 						}}
-						prefix={<Inbox size={14} />}
 					/>
 				</Popover>
 			)}
@@ -192,7 +190,6 @@ function HeaderRightSection({
 				>
 					<Button
 						variant="ghost"
-						color="secondary"
 						size="icon"
 						aria-label="Share"
 						prefix={<Globe size={14} />}

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,9 +4,8 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
+import { Button, Switch } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -156,10 +155,9 @@ function ShareURLModal(): JSX.Element {
 					</div>
 
 					<Button
+						className="periscope-btn secondary"
 						onClick={handleCopyURL}
-						variant="outlined"
-						color="secondary"
-						prefix={isURLCopied ? <Check size={14} /> : <Link2 size={14} />}
+						icon={isURLCopied ? <Check size={14} /> : <Link2 size={14} />}
 					>
 						Copy page link
 					</Button>

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CircleCheckBig, HandPlatter } from '@signozhq/icons';
@@ -57,18 +57,17 @@ export default function WaitlistFragment({
 			</Typography.Text>
 
 			<Button
-				className="join-waitlist-btn"
+				className="periscope-btn join-waitlist-btn"
+				type="default"
 				loading={isSubmitting}
-				onClick={handleJoinWaitlist}
-				variant="outlined"
-				color="secondary"
-				prefix={
+				icon={
 					isSuccess ? (
 						<CircleCheckBig size={16} color={Color.BG_FOREST_500} />
 					) : (
 						<HandPlatter size={16} />
 					)
 				}
+				onClick={handleJoinWaitlist}
 			>
 				Get early access
 			</Button>

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
-import { Input } from 'antd';
+import { Button, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';
 
@@ -56,12 +55,9 @@ function InputWithLabel({
 			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			{onClose && (
 				<Button
-					className="close-btn"
+					className="periscope-btn ghost close-btn"
+					icon={closeIcon || <X size={16} />}
 					onClick={onClose}
-					variant="outlined"
-					color="secondary"
-					size="icon"
-					prefix={(closeIcon as JSX.Element) || <X size={16} />}
 				/>
 			)}
 		</div>

frontend/src/components/LaunchChatSupport/LaunchChatSupport.styles.scss

@@ -2,7 +2,7 @@
 	color: var(--bg-amber-500);
 	border-color: var(--bg-amber-500);
 
-	> button:hover {
+	> .ant-btn:hover {
 		color: var(--bg-amber-400) !important;
 		border-color: var(--bg-amber-300) !important;
 	}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,9 +1,8 @@
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Modal, Tooltip } from 'antd';
+import { Button, Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';
@@ -169,11 +168,9 @@ function LaunchChatSupport({
 				overlayClassName="tooltip-overlay"
 			>
 				<Button
-					className={cx('facing-issue-button', className)}
+					className={cx('periscope-btn', 'facing-issue-button', className)}
 					onClick={handleFacingIssuesClick}
-					variant="outlined"
-					color="secondary"
-					prefix={<CircleHelp size={14} />}
+					icon={<CircleHelp size={14} />}
 				>
 					{buttonText || 'Facing issues?'}
 				</Button>
@@ -192,19 +189,19 @@ function LaunchChatSupport({
 						key="cancel"
 						onClick={(): void => setIsAddCreditCardModalOpen(false)}
 						className="cancel-btn"
-						variant="outlined"
-						color="secondary"
-						prefix={<X size={16} />}
+						icon={<X size={16} />}
 					>
 						Cancel
 					</Button>,
 					<Button
 						key="submit"
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
 						loading={isLoadingBilling}
 						disabled={isLoadingBilling}
 						onClick={handleAddCreditCard}
 						className="add-credit-card-btn"
-						prefix={<CreditCard size={16} />}
 					>
 						Add Credit Card
 					</Button>,

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,9 +1,9 @@
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import { ArrowUpRight } from '@signozhq/icons';
 import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 type LearnMoreProps = {
 	text?: string;
@@ -19,7 +19,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 		}
 	};
 	return (
-		<Button className="learn-more" onClick={handleClick} variant="link">
+		<Button type="link" className="learn-more" onClick={handleClick}>
 			<div className="learn-more__text">{text}</div>
 			<ArrowUpRight size={16} color={Color.BG_ROBIN_400} />
 		</Button>

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -17,7 +17,7 @@
 		.log-detail-drawer__title-right {
 			display: flex;
 			align-items: center;
-			button {
+			.ant-btn {
 				display: flex;
 				align-items: center;
 			}

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -166,7 +166,7 @@
 		border-left: 1px solid var(--l1-border) !important;
 	}
 
-	button {
+	.ant-btn-default {
 		border: none;
 		box-shadow: none;
 	}

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss

@@ -9,7 +9,7 @@
 	border: 1px solid var(--l1-border);
 	background: var(--l2-background);
 
-	button {
+	.ant-btn-default {
 		border: none;
 		box-shadow: none;
 		padding: 9px;

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx

@@ -1,9 +1,8 @@
 import { memo, MouseEventHandler } from 'react';
 import { Link, TextSelect } from '@signozhq/icons';
-import { Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 
 import './LogLinesActionButtons.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 export interface LogLinesActionButtonsProps {
 	handleShowContext: MouseEventHandler<HTMLElement>;
@@ -20,22 +19,18 @@ function LogLinesActionButtons({
 		<div className={`log-line-action-buttons ${customClassName}`}>
 			<Tooltip title="Show in Context">
 				<Button
+					size="small"
+					icon={<TextSelect size={14} />}
 					className="show-context-btn"
 					onClick={handleShowContext}
-					size="sm"
-					variant="outlined"
-					color="secondary"
-					prefix={<TextSelect size={14} />}
 				/>
 			</Tooltip>
 			<Tooltip title="Copy Link">
 				<Button
+					size="small"
+					icon={<Link size={14} />}
 					onClick={onLogCopy}
 					className="copy-log-btn"
-					size="sm"
-					variant="outlined"
-					color="secondary"
-					prefix={<Link size={14} />}
 				/>
 			</Tooltip>
 		</div>

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input, InputNumber, Popover, Tooltip } from 'antd';
+import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
@@ -224,8 +223,7 @@ function OptionsMenu({
 					<Button
 						onClick={(): void => setIsFontSizeOptionsOpen(false)}
 						className="back-btn"
-						variant="ghost"
-						color="secondary"
+						type="text"
 					>
 						<ChevronLeft size={14} className="icon" />
 						<Typography.Text className="text">Select font size</Typography.Text>
@@ -237,8 +235,7 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.SMALL);
 							}}
 							className="option-btn"
-							variant="ghost"
-							color="secondary"
+							type="text"
 						>
 							<Typography.Text className="text">{FontSize.SMALL}</Typography.Text>
 							{fontSizeValue === FontSize.SMALL && (
@@ -250,8 +247,7 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.MEDIUM);
 							}}
 							className="option-btn"
-							variant="ghost"
-							color="secondary"
+							type="text"
 						>
 							<Typography.Text className="text">{FontSize.MEDIUM}</Typography.Text>
 							{fontSizeValue === FontSize.MEDIUM && (
@@ -263,8 +259,7 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.LARGE);
 							}}
 							className="option-btn"
-							variant="ghost"
-							color="secondary"
+							type="text"
 						>
 							<Typography.Text className="text">{FontSize.LARGE}</Typography.Text>
 							{fontSizeValue === FontSize.LARGE && (
@@ -343,11 +338,10 @@ function OptionsMenu({
 						<div className="title">Font Size</div>
 						<Button
 							className="value"
+							type="text"
 							onClick={(): void => {
 								setIsFontSizeOptionsOpen(true);
 							}}
-							variant="ghost"
-							color="secondary"
 						>
 							<Typography.Text className="font-value">{fontSizeValue}</Typography.Text>
 							<ChevronRight size={14} className="icon" />
@@ -478,11 +472,9 @@ function LogsFormatOptionsMenu({
 		>
 			<Tooltip title="Options">
 				<Button
+					className="periscope-btn ghost"
+					icon={<SlidersVertical size="md" />}
 					data-testid="periscope-btn-format-options"
-					variant="outlined"
-					color="secondary"
-					size="icon"
-					prefix={<SlidersVertical size={14} />}
 				/>
 			</Tooltip>
 		</Popover>

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import { Button } from 'antd';
 import cx from 'classnames';
 import { useOnboardingStatus } from 'hooks/messagingQueue/useOnboardingStatus';
 import { Bolt, FolderTree } from '@signozhq/icons';
@@ -7,7 +8,6 @@ import { MessagingQueueHealthCheckService } from 'pages/MessagingQueues/Messagin
 import AttributeCheckList from './AttributeCheckList';
 
 import './MessagingQueueHealthCheck.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 interface MessagingQueueHealthCheckProps {
 	serviceToInclude: string[];
@@ -94,9 +94,7 @@ function MessagingQueueHealthCheck({
 					'config-btn',
 					missingConfiguration ? 'missing-config-btn' : '',
 				)}
-				variant="outlined"
-				color="secondary"
-				prefix={<Bolt size={12} />}
+				icon={<Bolt size={12} />}
 			>
 				<div className="config-btn-content">
 					{missingConfiguration

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -18,9 +18,8 @@ import {
 	RefreshCw,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Checkbox, Select } from 'antd';
+import { Button, Checkbox, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -768,11 +767,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 								<div className="option-badge">{capitalize(option.type)}</div>
 							)}
 							{option.value && ensureValidOption(option.value) && (
-								<Button className="only-btn" variant="ghost" color="secondary">
+								<Button type="text" className="only-btn">
 									{currentToggleTagValue({ option: option.value })}
 								</Button>
 							)}
-							<Button className="toggle-btn" variant="ghost" color="secondary">
+							<Button type="text" className="toggle-btn">
 								Toggle
 							</Button>
 						</div>

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

@@ -13,12 +13,12 @@ import { javascript } from '@codemirror/lang-javascript';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap } from '@uiw/react-codemirror';
+import { Button } from 'antd';
 import { Having } from 'api/v5/v5';
 import { useQueryBuilderV2Context } from 'components/QueryBuilderV2/QueryBuilderV2Context';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronUp } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { Button } from '@signozhq/ui/button';
 
 const havingOperators = [
 	{
@@ -368,12 +368,9 @@ function HavingFilter({
 					}}
 				/>
 				<Button
-					className="close-btn"
+					className="close-btn periscope-btn ghost"
+					icon={<ChevronUp size={16} />}
 					onClick={onClose}
-					variant="outlined"
-					color="secondary"
-					size="icon"
-					prefix={<ChevronUp size={16} />}
 				/>
 			</div>
 		</div>

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Radio, RadioChangeEvent, Tooltip } from 'antd';
+import { Button, Radio, RadioChangeEvent, Tooltip } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
@@ -17,7 +17,6 @@ import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';
 
 import './QueryAddOns.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 interface AddOn {
 	icon: React.ReactNode;
@@ -371,12 +370,9 @@ function QueryAddOns({
 									/>
 								</div>
 								<Button
-									className="close-btn"
+									className="close-btn periscope-btn ghost"
+									icon={<ChevronUp size={16} />}
 									onClick={(): void => handleRemoveView('group_by')}
-									variant="outlined"
-									color="secondary"
-									size="icon"
-									prefix={<ChevronUp size={16} />}
 								/>
 							</div>
 						</div>
@@ -459,12 +455,9 @@ function QueryAddOns({
 								</div>
 								{!isListViewPanel && (
 									<Button
-										className="close-btn"
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
 										onClick={(): void => handleRemoveView('order_by')}
-										variant="outlined"
-										color="secondary"
-										size="icon"
-										prefix={<ChevronUp size={16} />}
 									/>
 								)}
 							</div>
@@ -495,12 +488,9 @@ function QueryAddOns({
 									</div>
 
 									<Button
-										className="close-btn"
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
 										onClick={(): void => handleRemoveView('reduce_to')}
-										variant="outlined"
-										color="secondary"
-										size="icon"
-										prefix={<ChevronUp size={16} />}
 									/>
 								</div>
 							</div>

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

@@ -23,7 +23,7 @@ import CodeMirror, {
 	ViewPlugin,
 	ViewUpdate,
 } from '@uiw/react-codemirror';
-import { Popover, Tooltip } from 'antd';
+import { Button, Popover, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
@@ -36,7 +36,6 @@ import { TracesAggregatorOperator } from 'types/common/queryBuilder';
 import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
 
 import './QueryAggregation.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 const chipDecoration = Decoration.mark({
 	class: 'chip-decorator',
@@ -721,10 +720,9 @@ function QueryAggregationSelect({
 						overlayClassName="query-aggregation-error-popover"
 					>
 						<Button
-							className="query-aggregation-error-btn"
-							variant="ghost"
-							size="icon"
-							prefix={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+							type="text"
+							icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+							className="periscope-btn ghost query-aggregation-error-btn"
 						/>
 					</Popover>
 				</div>

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

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
-import { Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -57,11 +56,9 @@ function TraceOperatorSection({
 				}
 			>
 				<Button
-					className="add-trace-operator-button"
+					className="add-trace-operator-button periscope-btn"
+					icon={<DraftingCompass size={16} />}
 					onClick={(): void => addTraceOperator?.()}
-					variant="outlined"
-					color="secondary"
-					prefix={<DraftingCompass size={16} />}
 				>
 					<div className="qb-trace-operator-button-container-text">
 						Add Trace Matching
@@ -95,12 +92,9 @@ export default function QueryFooter({
 				<div className="qb-add-new-query">
 					<Tooltip title={<div style={{ textAlign: 'center' }}>Add New Query</div>}>
 						<Button
-							className="add-new-query-button"
+							className="add-new-query-button periscope-btn "
+							icon={<Plus size={16} />}
 							onClick={addNewBuilderQuery}
-							variant="outlined"
-							color="secondary"
-							size="icon"
-							prefix={<Plus size={16} />}
 						/>
 					</Tooltip>
 				</div>
@@ -124,11 +118,9 @@ export default function QueryFooter({
 							}
 						>
 							<Button
-								className="add-formula-button"
+								className="add-formula-button periscope-btn "
+								icon={<Sigma size={16} />}
 								onClick={addNewFormula}
-								variant="outlined"
-								color="secondary"
-								prefix={<Sigma size={16} />}
 							>
 								Add Formula
 							</Button>

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

@@ -14,7 +14,7 @@ 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 { Card, Collapse, Popover, Tag, Tooltip } from 'antd';
+import { Button, Card, Collapse, Popover, Tag, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
@@ -49,7 +49,6 @@ import { queryExamples } from './constants';
 import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 const { Panel } = Collapse;
 
@@ -1485,17 +1484,15 @@ function QuerySearch({
 						>
 							{validation.isValid ? (
 								<Button
-									variant="ghost"
-									color="secondary"
-									size="icon"
-									prefix={<CircleCheck size={14} />}
+									type="text"
+									icon={<CircleCheck size="md" />}
+									className="periscope-btn ghost"
 								/>
 							) : (
 								<Button
-									color="destructive"
-									variant="ghost"
-									size="icon"
-									prefix={<TriangleAlert size={14} />}
+									type="text"
+									icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+									className="periscope-btn ghost"
 								/>
 							)}
 						</Popover>

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

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
-import { Tooltip } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -109,7 +108,7 @@ export default function TraceOperator({
 				)}
 			</div>
 			<Tooltip title="Remove Trace Operator" placement="topLeft">
-				<Button onClick={removeTraceOperator} variant="outlined" color="secondary">
+				<Button className="periscope-btn ghost" onClick={removeTraceOperator}>
 					<Trash2 size={14} />
 				</Button>
 			</Tooltip>

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

@@ -15,7 +15,7 @@ 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 { Popover } from 'antd';
+import { Button, Popover } from 'antd';
 import cx from 'classnames';
 import {
 	TRACE_OPERATOR_OPERATORS,
@@ -34,7 +34,6 @@ import { getInvolvedQueriesInTraceOperator } from './utils/utils';
 
 import '../QuerySearch/QuerySearch.styles.scss';
 import { CircleCheck, TriangleAlert } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 
 // Custom extension to stop events
 const stopEventsExtension = EditorView.domEventHandlers({
@@ -466,16 +465,15 @@ function TraceOperatorEditor({
 						>
 							{validation.isValid ? (
 								<Button
-									variant="ghost"
-									color="secondary"
-									size="icon"
-									prefix={<CircleCheck size={14} />}
+									type="text"
+									icon={<CircleCheck size="md" />}
+									className="periscope-btn ghost"
 								/>
 							) : (
 								<Button
-									variant="ghost"
-									size="icon"
-									prefix={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+									type="text"
+									icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+									className="periscope-btn ghost"
 								/>
 							)}
 						</Popover>

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

@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Checkbox, Input, Skeleton } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Checkbox, Input, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
@@ -661,14 +660,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 													{String(value)}
 												</Typography.Text>
 											)}
-											<Button className="only-btn" variant="ghost" color="secondary">
+											<Button type="text" className="only-btn">
 												{isSomeFilterPresentForCurrentAttribute
 													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
 														? 'All'
 														: 'Only'
 													: 'Only'}
 											</Button>
-											<Button className="toggle-btn" variant="ghost" color="secondary">
+											<Button type="text" className="toggle-btn">
 												Toggle
 											</Button>
 										</div>

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

@@ -1,7 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import EmptyQuickFilterIcon from 'assets/CustomIcons/EmptyQuickFilterIcon';
 import { ArrowUpRight } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 
 const QUICK_FILTER_DOC_PATHS: Record<string, string> = {
 	severity_text: 'severity-text',
@@ -39,9 +39,9 @@ function LogsQuickFilterEmptyState({
 				</div>
 			</div>
 			<Button
+				type="link"
 				className="go-to-docs__button"
 				onClick={handleLearnMoreClick}
-				variant="link"
 			>
 				<div className="go-to-docs__button-text">Learn more</div>
 				<ArrowUpRight size={14} color={Color.BG_ROBIN_400} />

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Collapse } from 'antd';
+import { Button, Collapse } from 'antd';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
@@ -21,7 +21,6 @@ import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import './Duration.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 export type FilterType = Record<
 	AllTraceFilterKeys,
@@ -300,9 +299,9 @@ function Duration({
 			/>
 			{activeKeys.includes('durationNano') && (
 				<Button
+					type="link"
 					onClick={onClearHandler}
 					data-testid="collapse-duration-clearBtn"
-					variant="link"
 				>
 					Clear All
 				</Button>

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

@@ -14,10 +14,10 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { Button } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
-import { Button } from '@signozhq/ui/button';
 
 function SortableFilter({
 	filter,
@@ -50,13 +50,11 @@ function SortableFilter({
 			</div>
 			{allowRemove && (
 				<Button
-					className="remove-filter-btn"
+					className="remove-filter-btn periscope-btn"
+					size="small"
 					onClick={(): void => {
 						onRemove(filter as FilterType);
 					}}
-					size="sm"
-					variant="outlined"
-					color="secondary"
 				>
 					Remove
 				</Button>

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Skeleton } from 'antd';
+import { Button, Skeleton } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
@@ -12,7 +12,6 @@ import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 import { DataSource } from 'types/common/queryBuilder';
-import { Button } from '@signozhq/ui/button';
 
 function OtherFiltersSkeleton(): JSX.Element {
 	return (
@@ -147,11 +146,9 @@ function OtherFilters({
 			<div key={filter.key} className="qf-filter-item other-filters-item">
 				<div className="qf-filter-key">{filter.key}</div>
 				<Button
-					className="add-filter-btn"
+					className="add-filter-btn periscope-btn"
+					size="small"
 					onClick={(): void => handleAddFilter(filter as FilterType)}
-					size="sm"
-					variant="outlined"
-					color="secondary"
 				>
 					Add
 				</Button>

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from 'antd';
+import { Button, Input } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
@@ -9,7 +9,6 @@ import useQuickFilterSettings from './hooks/useQuickFilterSettings';
 import OtherFilters from './OtherFilters';
 
 import './QuickFiltersSettings.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function QuickFiltersSettings({
 	signal,
@@ -87,17 +86,17 @@ function QuickFiltersSettings({
 			{hasUnsavedChanges && (
 				<div className="qf-footer">
 					<Button
+						type="default"
 						onClick={handleDiscardChanges}
-						variant="outlined"
-						color="secondary"
-						prefix={<X size={16} />}
+						icon={<X size={16} />}
 					>
 						Discard
 					</Button>
 					<Button
+						type="primary"
 						onClick={handleSaveChanges}
+						icon={<Check size={16} />}
 						loading={isUpdatingCustomFilters}
-						prefix={<Check size={16} />}
 					>
 						Save changes
 					</Button>

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -1,14 +1,16 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import refreshPaymentStatus from 'api/v3/licenses/put';
+import cx from 'classnames';
 import { RefreshCcw } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
-import { Button } from '@signozhq/ui/button';
 
 function RefreshPaymentStatus({
+	btnShape,
 	type,
 }: {
+	btnShape?: 'default' | 'round' | 'circle';
 	type?: 'button' | 'text' | 'tooltip';
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
@@ -33,11 +35,12 @@ function RefreshPaymentStatus({
 		<span className="refresh-payment-status-btn-wrapper">
 			<Tooltip title={type === 'tooltip' ? t('refreshPaymentStatus') : ''}>
 				<Button
+					type={type === 'text' ? 'text' : 'default'}
+					shape={btnShape}
+					className={cx('periscope-btn', { text: type === 'text' })}
 					onClick={handleRefreshPaymentStatus}
+					icon={<RefreshCcw size={14} />}
 					loading={isLoading}
-					variant="outlined"
-					color="secondary"
-					prefix={<RefreshCcw size={14} />}
 				>
 					{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
 				</Button>
@@ -46,6 +49,7 @@ function RefreshPaymentStatus({
 	);
 }
 RefreshPaymentStatus.defaultProps = {
+	btnShape: 'default',
 	type: 'button',
 };
 

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,7 +4,7 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -21,7 +21,6 @@ import {
 } from './utils';
 
 import './DynamicColumnTable.syles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function DynamicColumnTable({
 	tablesource,
@@ -134,11 +133,9 @@ function DynamicColumnTable({
 					>
 						<Button
 							className="dynamicColumnTable-button filter-btn"
+							size="middle"
+							icon={<SlidersHorizontal size={14} />}
 							data-testid="additional-filters-button"
-							variant="outlined"
-							color="secondary"
-							size="icon"
-							prefix={<SlidersHorizontal size={14} />}
 						/>
 					</Dropdown>
 				)}

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

@@ -127,6 +127,7 @@ function KeyFormPhase({
 					>
 						<Button
 							type="submit"
+							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"

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

@@ -190,6 +190,7 @@ function EditKeyForm({
 					>
 						<Button
 							type="submit"
+							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"

frontend/src/components/SignozModal/SignozModal.style.scss

@@ -74,7 +74,7 @@
 	}
 
 	.ant-modal-footer {
-		button {
+		.ant-btn {
 			display: flex;
 			align-items: center;
 			gap: 4px;

frontend/src/components/Tags/Tags.tsx

@@ -1,10 +1,9 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
-import { Flex, Tag } from 'antd';
+import { Button, Flex, Tag } from 'antd';
 import Input from 'components/Input';
 
 import './Tags.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
@@ -72,19 +71,19 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 
 					<div className="confirm-cancel-actions">
 						<Button
+							type="primary"
+							className="periscope-btn"
+							size="small"
+							icon={<Check size={14} />}
 							onClick={handleInputConfirm}
-							size="sm"
-							prefix={<Check size={14} />}
-							variant="outlined"
-							color="secondary"
 						/>
 
 						<Button
+							type="primary"
+							className="periscope-btn"
+							size="small"
+							icon={<X size={14} />}
 							onClick={hideInput}
-							size="sm"
-							prefix={<X size={14} />}
-							variant="outlined"
-							color="secondary"
 						/>
 					</div>
 				</div>
@@ -92,14 +91,15 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 
 			{!inputVisible && (
 				<Button
+					type="primary"
+					size="small"
 					style={{
 						fontSize: '11px',
 					}}
 					onClick={showInput}
-					size="sm"
-					prefix={<Plus size={14} />}
 				>
 					<Flex justify="center" align="center" gap={4}>
+						<Plus size="md" />
 						New Tag
 					</Flex>
 				</Button>

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { Dropdown } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Dropdown } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
@@ -41,7 +40,7 @@ function TimePreference({
 			className="time-selection-target"
 			trigger={['click']}
 		>
-			<Button variant="outlined" color="secondary">
+			<Button>
 				<div className="button-selected-text">
 					<Globe size={14} />
 					<Typography.Text className="selected-value">

frontend/src/constants/features.ts

@@ -11,4 +11,5 @@ export enum FeatureKeys {
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
+	DASHBOARD_V2 = 'dashboard_v2',
 }

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

@@ -161,7 +161,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title={showHistory ? 'Back to chat' : 'Conversations'}>
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={(): void => setShowHistory((v) => !v)}
 									aria-label="Toggle conversations"
@@ -174,7 +173,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="New conversation">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={handleNew}
 									aria-label="New conversation"
@@ -186,7 +184,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="Open full screen">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={handleExpand}
 									disabled={!activeConversationId}
@@ -199,7 +196,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="Minimize to side panel">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={handleMinimize}
 									aria-label="Minimize to side panel"
@@ -211,7 +207,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="Close">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={closeModal}
 									aria-label="Close"

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

@@ -738,7 +738,6 @@ export default function ChatInput({
 							<span className={styles.attachmentName}>{f.name}</span>
 							<Button
 								variant="ghost"
-								color="secondary"
 								size="icon"
 								className={styles.attachmentRemove}
 								onClick={(): void => removeFile(f.uid)}
@@ -1008,7 +1007,6 @@ export default function ChatInput({
 							<TooltipSimple title="Voice input">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={(): void => startVoiceInput('button')}
 									disabled={disabled}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import history from 'lib/history';
 import { ArrowRight } from '@signozhq/icons';
@@ -10,7 +11,6 @@ import { TopContributorsCardProps } from './types';
 import ViewAllDrawer from './ViewAllDrawer';
 
 import './TopContributorsCard.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function TopContributorsCard({
 	topContributorsData,
@@ -52,12 +52,7 @@ function TopContributorsCard({
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button
-							className="view-all"
-							onClick={toggleViewAllDrawer}
-							variant="ghost"
-							color="secondary"
-						>
+						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
+import { Button } from 'antd';
 import type { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
@@ -11,7 +12,6 @@ import { useAppContext } from 'providers/App/App';
 import { Channels } from 'types/api/channels/getAll';
 
 import Delete from './Delete';
-import { Button } from '@signozhq/ui/button';
 
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -51,7 +51,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 			width: 80,
 			render: (id: string): JSX.Element => (
 				<>
-					<Button onClick={(): void => onClickEditHandler(id)} variant="link">
+					<Button onClick={(): void => onClickEditHandler(id)} type="link">
 						{t('column_channel_edit')}
 					</Button>
 					<Delete id={id} notifications={notifications} />

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
+import { Button } from 'antd';
 import type { NotificationInstance } from 'antd/es/notification/interface';
 import deleteChannel from 'api/channels/delete';
 import APIError from 'types/api/error';
-import { Button } from '@signozhq/ui/button';
 
 function Delete({ notifications, id }: DeleteProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -38,8 +38,8 @@ function Delete({ notifications, id }: DeleteProps): JSX.Element {
 		<Button
 			loading={loading}
 			disabled={loading}
+			type="link"
 			onClick={onClickHandler}
-			variant="link"
 		>
 			Delete
 		</Button>

frontend/src/container/AllError/index.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,7 +5,7 @@ import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
-import { Card, Input, Space, TableProps, Tooltip, Flex } from 'antd';
+import { Button, Card, Input, Space, TableProps, Tooltip, Flex } from 'antd';
 import { Search } from '@signozhq/icons';
 import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
@@ -267,8 +266,9 @@ function AllErrors(): JSX.Element {
 						onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
 					/>
 					<Button
+						type="primary"
 						onClick={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
-						size="sm"
+						size="small"
 					>
 						<Flex align="center" justify="center" gap={4}>
 							<Search size="md" />

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.styles.scss

@@ -706,7 +706,7 @@
 	.views-tabs {
 		color: var(--l2-foreground);
 
-		button {
+		.ant-btn {
 			box-shadow: none;
 			position: relative;
 		}

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

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
-import { Divider, Drawer, Radio } from 'antd';
-import { Button, ButtonGroup } from '@signozhq/ui/button';
+import { Button, Divider, Drawer, Radio } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { RadioChangeEvent } from 'antd/lib';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -177,7 +176,7 @@ function DomainDetails({
 							modalInitialStartTime={modalTimeRange.startTime * 1000}
 							modalInitialEndTime={modalTimeRange.endTime * 1000}
 						/>
-						<ButtonGroup className="domain-details-drawer-header-ctas">
+						<Button.Group className="domain-details-drawer-header-ctas">
 							<Button
 								className="domain-navigate-cta"
 								onClick={(): void => {
@@ -186,12 +185,9 @@ function DomainDetails({
 									setEndPointsGroupBy([]);
 									setSelectedView(VIEW_TYPES.ALL_ENDPOINTS);
 								}}
+								icon={<ArrowUp size={16} />}
 								disabled={selectedDomainIndex === 0}
 								title="Previous domain"
-								variant="outlined"
-								color="secondary"
-								size="icon"
-								prefix={<ArrowUp size={16} />}
 							/>
 							<Button
 								className="domain-navigate-cta"
@@ -201,14 +197,11 @@ function DomainDetails({
 									setEndPointsGroupBy([]);
 									setSelectedView(VIEW_TYPES.ALL_ENDPOINTS);
 								}}
+								icon={<ArrowDown size={16} />}
 								disabled={selectedDomainIndex === domainListLength - 1}
 								title="Next domain"
-								variant="outlined"
-								color="secondary"
-								size="icon"
-								prefix={<ArrowDown size={16} />}
 							/>
-						</ButtonGroup>
+						</Button.Group>
 					</div>
 				</div>
 			}

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

@@ -1,4 +1,4 @@
-import { Button } from '@signozhq/ui/button';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { RotateCw } from '@signozhq/icons';
 
@@ -22,9 +22,7 @@ function ErrorState({ refetch }: { refetch: () => void }): JSX.Element {
 				<Button
 					className="refresh-cta"
 					onClick={(): void => refetch()}
-					variant="outlined"
-					color="secondary"
-					prefix={<RotateCw size={16} />}
+					icon={<RotateCw size={16} />}
 				>
 					Refresh this panel
 				</Button>

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

@@ -1,8 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Card, Skeleton } from 'antd';
-import { Button, ButtonGroup } from '@signozhq/ui/button';
+import { Button, Card, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
@@ -248,25 +247,23 @@ function StatusCodeBarCharts({
 			<Card bordered className="endpoint-details-card">
 				<div className="header">
 					<Typography.Text>Call response status</Typography.Text>
-					<ButtonGroup>
+					<Button.Group className="views-tabs">
 						<Button
+							value={0}
 							className={currentWidgetInfoIndex === 0 ? 'selected_view tab' : 'tab'}
 							disabled={false}
 							onClick={(): void => setCurrentWidgetInfoIndex(0)}
-							variant="outlined"
-							color="secondary"
 						>
 							Number of calls
 						</Button>
 						<Button
+							value={1}
 							className={currentWidgetInfoIndex === 1 ? 'selected_view tab' : 'tab'}
 							onClick={(): void => setCurrentWidgetInfoIndex(1)}
-							variant="outlined"
-							color="secondary"
 						>
 							Latency
 						</Button>
-					</ButtonGroup>
+					</Button.Group>
 				</div>
 				<div className="graph-container" ref={graphRef}>
 					{renderCardContent(endPointStatusCodeBarChartsDataQuery)}

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +6,7 @@ import { CircleCheck, CloudDownload } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Alert,
+	Button,
 	Card,
 	Col,
 	Flex,
@@ -445,11 +445,12 @@ export default function BillingContainer(): JSX.Element {
 					</Flex>
 					<Flex gap={8}>
 						<Button
+							type="default"
+							size="middle"
 							loading={isLoadingBilling || isLoadingManageBilling}
 							disabled={isLoading || isFetchingBillingData}
 							onClick={handleCsvDownload}
-							variant="outlined"
-							color="secondary"
+							className="periscope-btn"
 						>
 							<Flex align="center" justify="center" gap={4}>
 								<CloudDownload size="md" />
@@ -458,6 +459,8 @@ export default function BillingContainer(): JSX.Element {
 						</Button>
 						<Button
 							data-testid="header-billing-button"
+							type="primary"
+							size="middle"
 							loading={isLoadingBilling || isLoadingManageBilling}
 							disabled={isLoading}
 							onClick={handleBilling}
@@ -581,6 +584,8 @@ export default function BillingContainer(): JSX.Element {
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
 							<Button
 								data-testid="upgrade-plan-button"
+								type="primary"
+								size="middle"
 								loading={isLoadingBilling || isLoadingManageBilling}
 								onClick={handleBilling}
 							>

frontend/src/container/Controls/index.tsx

@@ -1,12 +1,11 @@
 import { memo, useMemo } from 'react';
 import { ChevronLeft, ChevronRight } from '@signozhq/icons';
-import { Flex, Select } from 'antd';
+import { Button, Flex, Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
 import { Container } from './styles';
-import { Button } from '@signozhq/ui/button';
 
 function Controls({
 	offset = 0,
@@ -38,10 +37,10 @@ function Controls({
 		<Container>
 			<Button
 				loading={isLoading}
+				size="small"
+				type="link"
 				disabled={isPreviousDisabled}
 				onClick={handleNavigatePrevious}
-				size="sm"
-				variant="link"
 			>
 				<Flex align="center" gap="4px">
 					<ChevronLeft size={16} /> Previous
@@ -49,10 +48,10 @@ function Controls({
 			</Button>
 			<Button
 				loading={isLoading}
+				size="small"
+				type="link"
 				disabled={isNextDisabled}
 				onClick={handleNavigateNext}
-				size="sm"
-				variant="link"
 			>
 				<Flex align="center" gap="4px">
 					Next <ChevronRight size={16} />

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

@@ -1,5 +1,5 @@
 import { useQuery } from 'react-query';
-import { Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import getAllChannels from 'api/channels/getAll';
 import classNames from 'classnames';
 import { ChartLine } from '@signozhq/icons';
@@ -16,7 +16,6 @@ import AnomalyThreshold from './AnomalyThreshold';
 import { ANOMALY_TAB_TOOLTIP, THRESHOLD_TAB_TOOLTIP } from './constants';
 
 import './styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function AlertCondition(): JSX.Element {
 	const { alertType, setAlertType } = useCreateAlertState();
@@ -83,8 +82,6 @@ function AlertCondition(): JSX.Element {
 										handleAlertTypeChange(tab.value as AlertTypes);
 									}
 								}}
-								variant="outlined"
-								color="secondary"
 							>
 								{tab.icon}
 								{tab.label}

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

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { Select, Tooltip } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -295,11 +294,11 @@ function AlertThreshold({
 					/>
 				))}
 				<Button
+					type="dashed"
+					icon={<Plus size={16} />}
 					onClick={addThreshold}
 					className="add-threshold-btn"
 					data-testid="add-threshold-button"
-					variant="dashed"
-					prefix={<Plus size={16} />}
 				>
 					Add Threshold
 				</Button>

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

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Input, Select, Tooltip } from 'antd';
-import { Button, ButtonGroup } from '@signozhq/ui/button';
+import { Button, Input, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
@@ -167,18 +166,16 @@ function ThresholdItem({
 							/>
 							<Tooltip title="Remove recovery threshold">
 								<Button
+									type="default"
+									icon={<Trash size={16} />}
 									onClick={removeRecoveryThreshold}
 									className="icon-btn"
 									data-testid="remove-recovery-threshold-button"
-									variant="outlined"
-									color="secondary"
-									size="icon"
-									prefix={<Trash size={16} />}
 								/>
 							</Tooltip>
 						</>
 					)}
-					<ButtonGroup>
+					<Button.Group>
 						{/* TODO: Add recovery threshold back once the functionality is implemented */}
 						{/* {!showRecoveryThreshold && (
 							<Tooltip title="Add recovery threshold">
@@ -193,17 +190,15 @@ function ThresholdItem({
 						{showRemoveButton && (
 							<Tooltip title="Remove threshold">
 								<Button
+									type="default"
+									icon={<CircleX size={16} />}
 									onClick={(): void => removeThreshold(threshold.id)}
 									className="icon-btn"
 									data-testid="remove-threshold-button"
-									variant="outlined"
-									color="secondary"
-									size="icon"
-									prefix={<CircleX size={16} />}
 								/>
 							</Tooltip>
 						)}
-					</ButtonGroup>
+					</Button.Group>
 				</div>
 			</div>
 		</div>

frontend/src/container/CreateAlertV2/AlertCondition/styles.scss

@@ -333,7 +333,7 @@
 }
 
 .condensed-evaluation-settings-container {
-	button {
+	.ant-btn {
 		display: flex;
 		align-items: center;
 		min-width: 240px;

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

@@ -1,5 +1,4 @@
-import { Flex, SelectProps, Switch } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Flex, SelectProps, Switch } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
@@ -389,10 +388,10 @@ export function NotificationChannelsNotFoundContent({
 						Create one
 						<Button
 							style={{ padding: '0 4px' }}
+							type="link"
 							onClick={(): void => {
 								openInNewTab(ROUTES.CHANNELS_NEW);
 							}}
-							variant="link"
 						>
 							here.
 						</Button>
@@ -401,7 +400,7 @@ export function NotificationChannelsNotFoundContent({
 					<Typography.Text>Please ask your admin to create one.</Typography.Text>
 				)}
 			</Flex>
-			<Button onClick={refreshChannels} variant="ghost" color="secondary">
+			<Button type="text" onClick={refreshChannels}>
 				Refresh
 			</Button>
 		</Flex>
@@ -430,10 +429,10 @@ export function RoutingPolicyBanner({
 					}}
 				/>
 				<Button
+					type="link"
 					className="view-routing-policies-button"
 					data-testid="view-routing-policies-button"
 					onClick={(): void => safeNavigate(ROUTING_POLICIES_ROUTE)}
-					variant="link"
 				>
 					View Routing Policies
 					<ArrowRight size={14} />

frontend/src/container/CreateAlertV2/CreateAlertHeader/styles.scss

@@ -50,7 +50,7 @@
 		color: var(--l2-foreground);
 	}
 
-	button {
+	.ant-btn {
 		display: flex;
 		gap: 4px;
 		align-items: center;

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EditCustomSchedule.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Button, ButtonGroup } from '@signozhq/ui/button';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
@@ -80,19 +80,23 @@ function EditCustomSchedule({
 		<div className="edit-custom-schedule">
 			{displayText}
 			<div className="button-row">
-				<ButtonGroup variant="outlined" color="secondary">
-					<Button onClick={handleEdit} prefix={<Pencil size={12} />}>
+				<Button.Group>
+					<Button type="default" onClick={handleEdit}>
+						<Pencil size={12} />
 						<Typography.Text>Edit custom schedule</Typography.Text>
 					</Button>
-					<Button onClick={handlePreview} prefix={<Calendar1 size={12} />}>
+					<Button type="default" onClick={handlePreview}>
+						<Calendar1 size={12} />
 						<Typography.Text>Preview</Typography.Text>
 					</Button>
 					<Button
 						data-testid="discard-button"
+						type="default"
 						onClick={handleDiscard}
-						prefix={<Trash size={12} />}
-					/>
-				</ButtonGroup>
+					>
+						<Trash size={12} />
+					</Button>
+				</Button.Group>
 			</div>
 		</div>
 	);

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { DatePicker, Input, Select } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, DatePicker, Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
@@ -312,8 +311,6 @@ function EvaluationCadenceDetails({
 									onClick={(): void => {
 										handleChangeTab(tab.value as 'editor' | 'rrule');
 									}}
-									variant="outlined"
-									color="secondary"
 								>
 									{tab.icon}
 									{tab.label}
@@ -324,10 +321,14 @@ function EvaluationCadenceDetails({
 					{activeTab === 'editor' && EditorView}
 					{activeTab === 'rrule' && RRuleView}
 					<div className="buttons-row">
-						<Button onClick={handleDiscard} variant="outlined" color="secondary">
+						<Button type="default" onClick={handleDiscard}>
 							Discard
 						</Button>
-						<Button onClick={handleSaveCustomSchedule} disabled={disableSaveButton}>
+						<Button
+							type="primary"
+							onClick={handleSaveCustomSchedule}
+							disabled={disableSaveButton}
+						>
 							Save Custom Schedule
 						</Button>
 					</div>

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/styles.scss

@@ -25,6 +25,17 @@
 				font-size: 13px;
 			}
 		}
+
+		.ant-btn-group {
+			.ant-btn {
+				border: 1px solid var(--l1-border);
+				color: var(--l2-foreground);
+				font-size: 13px;
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+		}
 	}
 }
 

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Popover } from 'antd';
+import { Button, Popover } from 'antd';
 import { ChevronDown, ChevronUp } from '@signozhq/icons';
 
 import { useCreateAlertState } from '../context';
@@ -7,7 +7,6 @@ import EvaluationWindowPopover from './EvaluationWindowPopover';
 import { getEvaluationWindowTypeText, getTimeframeText } from './utils';
 
 import './styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function EvaluationSettings(): JSX.Element {
 	const { evaluationWindow, setEvaluationWindow } = useCreateAlertState();
@@ -30,11 +29,7 @@ function EvaluationSettings(): JSX.Element {
 			trigger="click"
 			showArrow={false}
 		>
-			<Button
-				data-testid="evaluation-settings-button"
-				variant="outlined"
-				color="secondary"
-			>
+			<Button data-testid="evaluation-settings-button">
 				<div className="evaluate-alert-conditions-button-left">
 					{getTimeframeText(evaluationWindow)}
 				</div>

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

@@ -1,4 +1,4 @@
-import { Button } from '@signozhq/ui/button';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
 import { Check } from '@signozhq/icons';
@@ -98,7 +98,7 @@ function EvaluationWindowPopover({
 					<Typography.Text>
 						{getRollingWindowDescription(evaluationWindow.timeframe)}
 					</Typography.Text>
-					<Button variant="link">Read the docs</Button>
+					<Button type="link">Read the docs</Button>
 				</div>
 			);
 		}
@@ -112,7 +112,7 @@ function EvaluationWindowPopover({
 					<Typography.Text>
 						{getCumulativeWindowDescription(evaluationWindow.timeframe)}
 					</Typography.Text>
-					<Button variant="link">Read the docs</Button>
+					<Button type="link">Read the docs</Button>
 				</div>
 			);
 		}

frontend/src/container/CreateAlertV2/EvaluationSettings/styles.scss

@@ -22,7 +22,7 @@
 			border-top: 1px dashed var(--l1-border);
 		}
 
-		button {
+		.ant-btn {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
@@ -156,7 +156,7 @@
 						color: var(--muted-foreground);
 					}
 
-					button {
+					.ant-btn {
 						width: fit-content;
 					}
 				}
@@ -171,7 +171,7 @@
 				padding: 16px;
 			}
 
-			button {
+			.ant-btn {
 				background-color: var(--l3-background);
 				border: 1px solid var(--l1-border);
 				color: var(--l2-foreground);

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -17,13 +17,13 @@
 		gap: 12px;
 	}
 
-	button {
+	.ant-btn {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 	}
 
-	button {
+	.ant-btn-default {
 		background-color: var(--l1-background);
 		border: 1px solid var(--l1-border);
 		color: var(--l2-foreground);

frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss

@@ -42,7 +42,7 @@
 			}
 
 			.notification-message-header-actions {
-				button {
+				.ant-btn {
 					display: flex;
 					align-items: center;
 					justify-content: center;

frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
+import { Button } from 'antd';
 import classNames from 'classnames';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { QueryParams } from 'constants/query';
@@ -25,7 +26,6 @@ import ChartPreview from './ChartPreview';
 import { buildAlertDefForChartPreview } from './utils';
 
 import './styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function QuerySection(): JSX.Element {
 	const {
@@ -149,8 +149,6 @@ function QuerySection(): JSX.Element {
 							onClick={(): void => {
 								setAlertType(tab.value as AlertTypes);
 							}}
-							variant="outlined"
-							color="secondary"
 						>
 							{tab.icon}
 							{tab.label}

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -44,7 +44,6 @@ function DomainUpdateToast({
 			<div className="custom-domain-toast-actions">
 				<Button
 					variant="ghost"
-					color="secondary"
 					size="sm"
 					className="custom-domain-toast-visit-btn"
 					suffix={<ExternalLink size={12} />}
@@ -57,7 +56,6 @@ function DomainUpdateToast({
 				</Button>
 				<Button
 					variant="ghost"
-					color="secondary"
 					size="icon"
 					className="custom-domain-toast-dismiss-btn"
 					onClick={(): void => {

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -191,7 +191,7 @@
 			flex-direction: column;
 			align-items: start;
 
-			button {
+			.ant-btn {
 				display: flex;
 				width: 100%;
 				height: unset;

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

@@ -16,8 +16,7 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
@@ -376,12 +375,11 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 											}
 										>
 											<Button
+												type="text"
+												icon={<LockKeyhole size={14} />}
 												disabled={dashboardData?.createdBy === 'integration'}
 												onClick={handleLockDashboardToggle}
 												data-testid="lock-unlock-dashboard"
-												variant="ghost"
-												color="secondary"
-												prefix={<LockKeyhole size={14} />}
 											>
 												{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
 											</Button>
@@ -390,23 +388,21 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 									{!isDashboardLocked && editDashboard && (
 										<Button
+											type="text"
+											icon={<PenLine size={14} />}
 											onClick={(): void => {
 												setIsRenameDashboardOpen(true);
 												setIsDashbordSettingsOpen(false);
 											}}
-											variant="ghost"
-											color="secondary"
-											prefix={<PenLine size={14} />}
 										>
 											Rename
 										</Button>
 									)}
 
 									<Button
+										type="text"
+										icon={<Fullscreen size={14} />}
 										onClick={handle.enter}
-										variant="ghost"
-										color="secondary"
-										prefix={<Fullscreen size={14} />}
 									>
 										Full screen
 									</Button>
@@ -414,19 +410,20 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 								<section className="section-2">
 									{!isDashboardLocked && addPanelPermission && (
 										<Button
+											type="text"
+											icon={<FolderKanban size={14} />}
 											onClick={(): void => {
 												setIsPanelNameModalOpen(true);
 												setIsDashbordSettingsOpen(false);
 											}}
-											variant="ghost"
-											color="secondary"
-											prefix={<FolderKanban size={14} />}
 										>
 											New section
 										</Button>
 									)}
 
 									<Button
+										type="text"
+										icon={<FileJson size={14} />}
 										onClick={(): void => {
 											downloadObjectAsJson(
 												sanitizeDashboardData(selectedData),
@@ -434,22 +431,18 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 											);
 											setIsDashbordSettingsOpen(false);
 										}}
-										variant="ghost"
-										color="secondary"
-										prefix={<FileJson size={14} />}
 									>
 										Export JSON
 									</Button>
 									<Button
+										type="text"
+										icon={<ClipboardCopy size={14} />}
 										onClick={(): void => {
 											setCopy(
 												JSON.stringify(sanitizeDashboardData(selectedData), null, 2),
 											);
 											setIsDashbordSettingsOpen(false);
 										}}
-										variant="ghost"
-										color="secondary"
-										prefix={<ClipboardCopy size={14} />}
 									>
 										Copy as JSON
 									</Button>
@@ -469,23 +462,20 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 						placement="bottomRight"
 					>
 						<Button
+							icon={<Ellipsis size={14} />}
+							type="text"
 							className="icons"
 							data-testid="options"
-							variant="ghost"
-							color="secondary"
-							size="icon"
-							prefix={<Ellipsis size={14} />}
 						/>
 					</Popover>
 					{!isDashboardLocked && editDashboard && (
 						<>
 							<Button
+								type="text"
 								className="configure-button"
+								icon={<ConfigureIcon />}
 								data-testid="show-drawer"
 								onClick={onConfigureClick}
-								variant="ghost"
-								color="secondary"
-								prefix={<ConfigureIcon />}
 							>
 								Configure
 							</Button>
@@ -504,8 +494,9 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 						<Button
 							className="add-panel-btn"
 							onClick={onEmptyWidgetHandler}
+							icon={<Plus size="md" />}
+							type="primary"
 							data-testid="add-panel-header"
-							prefix={<Plus size="md" />}
 						>
 							New Panel
 						</Button>
@@ -545,19 +536,19 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 				footer={
 					<div className="dashboard-rename">
 						<Button
+							type="primary"
+							icon={<Check size={14} />}
 							className="rename-btn"
 							onClick={onNameChangeHandler}
 							disabled={updateDashboardMutation.isLoading}
-							prefix={<Check size={14} />}
 						>
 							Rename Dashboard
 						</Button>
 						<Button
+							type="text"
+							icon={<X size={14} />}
 							className="cancel-btn"
 							onClick={(): void => setIsRenameDashboardOpen(false)}
-							variant="ghost"
-							color="secondary"
-							prefix={<X size={14} />}
 						>
 							Cancel
 						</Button>
@@ -586,22 +577,22 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 				footer={
 					<div className="dashboard-rename">
 						<Button
+							type="primary"
+							icon={<Check size={14} />}
 							className="rename-btn"
 							onClick={(): void => handleAddRow()}
 							disabled={updateDashboardMutation.isLoading}
-							prefix={<Check size={14} />}
 						>
 							Create Section
 						</Button>
 						<Button
+							type="text"
+							icon={<X size={14} />}
 							className="cancel-btn"
 							onClick={(): void => {
 								setIsPanelNameModalOpen(false);
 								setSectionName(DEFAULT_ROW_NAME);
 							}}
-							variant="ghost"
-							color="secondary"
-							prefix={<X size={14} />}
 						>
 							Cancel
 						</Button>

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

@@ -114,7 +114,7 @@
 				background: var(--l2-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
-				button {
+				.ant-btn {
 					width: 114px;
 					height: 32px;
 					flex-shrink: 0;

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

@@ -5,8 +5,7 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Collapse, Input, Select, Switch, Tag } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Collapse, Input, Select, Switch, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
@@ -442,11 +441,10 @@ function VariableItem({
 			<div className="variable-item-container">
 				<div className="all-variables">
 					<Button
+						type="text"
 						className="all-variables-btn"
+						icon={<ArrowLeft size={14} />}
 						onClick={onCancel}
-						variant="ghost"
-						color="secondary"
-						prefix={<ArrowLeft size={14} />}
 					>
 						All variables
 					</Button>
@@ -527,6 +525,8 @@ function VariableItem({
 
 						<div className="variable-type-btn-group">
 							<Button
+								type="text"
+								icon={<Pyramid size={14} />}
 								className={cx(
 									'variable-type-btn',
 									queryType === 'DYNAMIC' ? 'selected' : '',
@@ -539,9 +539,6 @@ function VariableItem({
 										setHasUserManuallyChangedName(false);
 									}
 								}}
-								variant="ghost"
-								color="secondary"
-								prefix={<Pyramid size={14} />}
 							>
 								Dynamic
 								<Tag bordered={false} className="sidenav-beta-tag" color="geekblue">
@@ -549,6 +546,8 @@ function VariableItem({
 								</Tag>
 							</Button>
 							<Button
+								type="text"
+								icon={<ClipboardType size={14} />}
 								className={cx(
 									'variable-type-btn',
 									queryType === 'TEXTBOX' ? 'selected' : '',
@@ -561,13 +560,12 @@ function VariableItem({
 										setHasUserManuallyChangedName(false);
 									}
 								}}
-								variant="ghost"
-								color="secondary"
-								prefix={<ClipboardType size={14} />}
 							>
 								Textbox
 							</Button>
 							<Button
+								type="text"
+								icon={<LayoutList size={14} />}
 								className={cx(
 									'variable-type-btn',
 									queryType === 'CUSTOM' ? 'selected' : '',
@@ -580,13 +578,12 @@ function VariableItem({
 										setHasUserManuallyChangedName(false);
 									}
 								}}
-								variant="ghost"
-								color="secondary"
-								prefix={<LayoutList size={14} />}
 							>
 								Custom
 							</Button>
 							<Button
+								type="text"
+								icon={<DatabaseZap size={14} />}
 								className={cx(
 									'variable-type-btn',
 									queryType === 'QUERY' ? 'selected' : '',
@@ -599,9 +596,6 @@ function VariableItem({
 										setHasUserManuallyChangedName(false);
 									}
 								}}
-								variant="ghost"
-								color="secondary"
-								prefix={<DatabaseZap size={14} />}
 							>
 								Query
 								<Tag bordered={false} className="sidenav-beta-tag" color="warning">
@@ -662,13 +656,14 @@ function VariableItem({
 									}}
 								/>
 								<Button
+									type="primary"
+									size="small"
 									onClick={handleTestRunQuery}
 									style={{
 										position: 'absolute',
 										bottom: 0,
 									}}
 									loading={previewLoading}
-									size="sm"
 								>
 									Test Run Query
 								</Button>
@@ -829,19 +824,19 @@ function VariableItem({
 			<div className="variable-item-footer">
 				<VariableItemRow>
 					<Button
+						type="default"
 						onClick={onCancel}
+						icon={<X size={14} />}
 						className="footer-btn-discard"
-						variant="outlined"
-						color="secondary"
-						prefix={<X size={14} />}
 					>
 						Discard
 					</Button>
 					<Button
+						type="primary"
 						onClick={handleSave}
 						disabled={errorName || errorAttributeKey}
+						icon={<Check size={14} />}
 						className="footer-btn-save"
-						prefix={<Check size={14} />}
 					>
 						Save Variable
 					</Button>

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

@@ -11,8 +11,7 @@ import {
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Flex, Modal, Row, RowProps, Space, Table } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Modal, Row, RowProps, Space, Table, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { VariablesSettingsTabHandle } from 'container/DashboardContainer/DashboardDescription/types';
 import { convertVariablesToDbFormat } from 'container/DashboardContainer/DashboardVariablesSelection/util';
@@ -332,32 +331,29 @@ function VariablesSettings({
 					<Space className="actions-btns">
 						{variable.type === 'DYNAMIC' && (
 							<Button
+								type="text"
 								onClick={(): void => onApplyToAllHandler(variable)}
 								className="apply-to-all-button"
 								loading={updateMutation.isLoading}
-								variant="ghost"
-								color="secondary"
 							>
 								<Typography.Text>Apply to all</Typography.Text>
 							</Button>
 						)}
 						<Button
+							type="text"
 							onClick={(): void => onVariableViewModeEnter('EDIT', variable)}
 							className="edit-variable-button"
-							variant="ghost"
-							color="secondary"
 						>
 							<PenLine size={14} />
 						</Button>
 						<Button
+							type="text"
 							onClick={(): void => {
 								if (variable) {
 									onVariableDeleteHandler(variable);
 								}
 							}}
 							className="delete-variable-button"
-							variant="ghost"
-							color="secondary"
 						>
 							<Trash2 size={14} />
 						</Button>
@@ -438,6 +434,7 @@ function VariablesSettings({
 					>
 						<Button
 							data-testid="add-new-variable"
+							type="primary"
 							onClick={(): void =>
 								onVariableViewModeEnter('ADD', {} as IDashboardVariable)
 							}

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

@@ -3,8 +3,7 @@ import { useMutation } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { toast } from '@signozhq/ui/sonner';
-import { Select } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import createPublicDashboardAPI from 'api/dashboard/public/createPublicDashboard';
 import revokePublicDashboardAccessAPI from 'api/dashboard/public/revokePublicDashboardAccess';
@@ -295,21 +294,20 @@ function PublicDashboardSetting(): JSX.Element {
 							</Typography.Text>
 
 							<Button
-								className="url-copy-btn"
+								type="link"
+								className="url-copy-btn periscope-btn ghost"
+								icon={<Copy size={12} />}
 								onClick={handleCopyPublicDashboardURL}
-								variant="link"
-								size="icon"
-								prefix={<Copy size={12} />}
 							/>
 							<Button
+								type="link"
+								className="periscope-btn ghost"
+								icon={<ExternalLink size={12} />}
 								onClick={(): void => {
 									if (publicDashboardURL) {
 										openInNewTab(publicDashboardURL);
 									}
 								}}
-								variant="link"
-								size="icon"
-								prefix={<ExternalLink size={12} />}
 							/>
 						</div>
 					</div>
@@ -325,7 +323,8 @@ function PublicDashboardSetting(): JSX.Element {
 				<div className="public-dashboard-setting-actions">
 					{!isPublicDashboard ? (
 						<Button
-							className="create-public-dashboard-btn"
+							type="primary"
+							className="create-public-dashboard-btn periscope-btn primary"
 							disabled={isLoading || !isAdmin}
 							onClick={handleCreatePublicDashboard}
 							loading={
@@ -333,7 +332,7 @@ function PublicDashboardSetting(): JSX.Element {
 								isFetchingPublicDashboard ||
 								isLoadingPublicDashboard
 							}
-							prefix={
+							icon={
 								isLoadingCreatePublicDashboard ||
 								isFetchingPublicDashboard ||
 								isLoadingPublicDashboard ? (
@@ -342,32 +341,29 @@ function PublicDashboardSetting(): JSX.Element {
 									<Globe size={14} />
 								)
 							}
-							variant="solid"
-							color="primary"
 						>
 							Publish dashboard
 						</Button>
 					) : (
 						<>
 							<Button
+								type="default"
+								className="periscope-btn secondary"
 								disabled={isLoading || !isAdmin}
 								onClick={handleRevokePublicDashboardAccess}
 								loading={isLoadingRevokePublicDashboardAccess}
-								variant="outlined"
-								color="secondary"
-								prefix={<Trash size={14} />}
+								icon={<Trash size={14} />}
 							>
 								Unpublish dashboard
 							</Button>
 
 							<Button
-								className="create-public-dashboard-btn"
+								type="primary"
+								className="create-public-dashboard-btn periscope-btn primary"
 								disabled={isLoading || !isAdmin}
 								onClick={handleUpdatePublicDashboard}
 								loading={isLoadingUpdatePublicDashboard}
-								prefix={<Globe size={14} />}
-								variant="solid"
-								color="primary"
+								icon={<Globe size={14} />}
 							>
 								Update published dashboard
 							</Button>

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

@@ -1,4 +1,4 @@
-import { Tabs, Tooltip } from 'antd';
+import { Button, Tabs, Tooltip } from 'antd';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Braces, Globe, Table } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
@@ -10,7 +10,6 @@ import GeneralDashboardSettings from './General';
 import PublicDashboardSetting from './PublicDashboard';
 
 import './DashboardSettingsContent.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function DashboardSettings({
 	variablesSettingsTabHandle,
@@ -33,12 +32,11 @@ function DashboardSettings({
 				placement="right"
 			>
 				<Button
+					type="text"
+					icon={<Globe size={14} />}
 					className={`public-dashboard-btn ${
 						user?.role !== USER_ROLES.ADMIN ? 'disabled-btn' : ''
 					}`}
-					variant="ghost"
-					color="secondary"
-					prefix={<Globe size={14} />}
 				>
 					Publish
 				</Button>
@@ -52,12 +50,7 @@ function DashboardSettings({
 	const items = [
 		{
 			label: (
-				<Button
-					className="overview-btn"
-					variant="ghost"
-					color="secondary"
-					prefix={<Table size={14} />}
-				>
+				<Button type="text" icon={<Table size={14} />} className="overview-btn">
 					Overview
 				</Button>
 			),
@@ -66,12 +59,7 @@ function DashboardSettings({
 		},
 		{
 			label: (
-				<Button
-					className="variables-btn"
-					variant="ghost"
-					color="secondary"
-					prefix={<Braces size={14} />}
-				>
+				<Button type="text" icon={<Braces size={14} />} className="variables-btn">
 					Variables
 				</Button>
 			),

frontend/src/container/DashboardContainer/PanelTypeSelectionModal/PanelTypeSelectionModal.styles.scss

@@ -90,7 +90,7 @@
 			padding: 12px 15px;
 			margin-top: 0px;
 
-			button {
+			.ant-btn {
 				width: 100%;
 				display: flex;
 				align-items: center;

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from 'react';
+import { Button } from 'antd';
 import getSessionStorageApi from 'api/browser/sessionstorage/get';
 import ROUTES from 'constants/routes';
 import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
@@ -10,7 +11,6 @@ import { DashboardData } from 'types/api/dashboard/getAll';
 import { Base64Icons } from '../../DashboardSettings/General/utils';
 
 import './DashboardBreadcrumbs.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function DashboardBreadcrumbs(): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
@@ -46,19 +46,14 @@ function DashboardBreadcrumbs(): JSX.Element {
 	return (
 		<div className="dashboard-breadcrumbs">
 			<Button
+				type="text"
+				icon={<LayoutGrid size={14} />}
 				className="dashboard-btn"
 				onClick={goToListPage}
-				variant="ghost"
-				color="secondary"
-				prefix={<LayoutGrid size={14} />}
 			>
 				Dashboard /
 			</Button>
-			<Button
-				className="id-btn dashboard-name-btn"
-				variant="ghost"
-				color="secondary"
-			>
+			<Button type="text" className="id-btn dashboard-name-btn">
 				<img src={image} alt="dashboard-icon" className="dashboard-icon-image" />
 				{title}
 			</Button>

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Input } from 'antd';
+import { Button, Input } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';
@@ -15,7 +15,6 @@ import { getChartManagerColumns } from './getChartMangerColumns';
 import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
 
 import './ChartManager.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 interface ChartManagerProps {
 	config: UPlotConfigBuilder;
@@ -152,10 +151,12 @@ export default function ChartManager({
 					data-testid="filter-input"
 				/>
 				<div className="chart-manager-actions-container">
-					<Button onClick={onCancel} variant="outlined" color="secondary">
+					<Button type="default" onClick={onCancel}>
 						Cancel
 					</Button>
-					<Button onClick={handleSave}>Save</Button>
+					<Button type="primary" onClick={handleSave}>
+						Save
+					</Button>
 				</div>
 			</div>
 			<div className="chart-manager-table-container">

frontend/src/container/Download/Download.tsx

@@ -1,12 +1,11 @@
 import { useState } from 'react';
 import { CloudDownload } from '@signozhq/icons';
-import { Dropdown, Flex, MenuProps } from 'antd';
+import { Button, Dropdown, MenuProps, Flex } from 'antd';
 import { unparse } from 'papaparse';
 
 import { DownloadProps } from './Download.types';
 
 import './Download.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 	const [isDownloading, setIsDownloading] = useState(false);
@@ -72,8 +71,8 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 			<Button
 				className="download-button"
 				loading={isLoading || isDownloading}
-				size="sm"
-				variant="link"
+				size="small"
+				type="link"
 			>
 				<Flex align="center" gap={4}>
 					<CloudDownload size="md" />

frontend/src/container/ErrorDetails/index.tsx

@@ -2,8 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Divider, Space } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Divider, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import getNextPrevId from 'api/errors/getNextPrevId';
@@ -173,8 +172,6 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 									nextPrevData?.payload?.prevTimestamp || '',
 								)
 							}
-							variant="outlined"
-							color="secondary"
 						>
 							{t('older')}
 						</Button>
@@ -187,8 +184,6 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 									nextPrevData?.payload?.nextTimestamp || '',
 								)
 							}
-							variant="outlined"
-							color="secondary"
 						>
 							{t('newer')}
 						</Button>
@@ -198,7 +193,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 
 			<DashedContainer>
 				<Typography>{t('see_trace_graph')}</Typography>
-				<Button onClick={onClickTraceHandler}>
+				<Button onClick={onClickTraceHandler} type="primary">
 					{t('see_error_in_trace_graph')}
 				</Button>
 			</DashedContainer>

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -20,7 +20,7 @@ import {
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
-	Button as AntdButton,
+	Button,
 	ColorPicker,
 	Divider,
 	Input,
@@ -29,7 +29,6 @@ import {
 	Select,
 	Tooltip,
 } from 'antd';
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -737,13 +736,13 @@ function ExplorerOptions({
 	const CreateAlertButton = useMemo(() => {
 		if (isOneChartPerQuery) {
 			const selectLabel = (
-				<AntdButton
+				<Button
 					disabled={disabled}
 					shape="round"
 					icon={<ConciergeBell size={16} />}
 				>
 					Create an Alert
-				</AntdButton>
+				</Button>
 			);
 			return (
 				<Select
@@ -770,14 +769,14 @@ function ExplorerOptions({
 			);
 		}
 		return (
-			<AntdButton
+			<Button
 				disabled={disabled}
 				shape="round"
 				onClick={(): void => onCreateAlertsHandler(query)}
 				icon={<ConciergeBell size={16} />}
 			>
 				Create an Alert
-			</AntdButton>
+			</Button>
 		);
 	}, [
 		disabled,
@@ -790,7 +789,7 @@ function ExplorerOptions({
 	const AddToDashboardButton = useMemo(() => {
 		if (isOneChartPerQuery) {
 			const selectLabel = (
-				<AntdButton
+				<Button
 					type="primary"
 					disabled={disabled}
 					shape="round"
@@ -798,7 +797,7 @@ function ExplorerOptions({
 					icon={<Plus size={16} />}
 				>
 					Add to Dashboard
-				</AntdButton>
+				</Button>
 			);
 			return (
 				<Select
@@ -829,7 +828,7 @@ function ExplorerOptions({
 			);
 		}
 		return (
-			<AntdButton
+			<Button
 				type="primary"
 				disabled={disabled}
 				shape="round"
@@ -837,7 +836,7 @@ function ExplorerOptions({
 				icon={<Plus size={16} />}
 			>
 				Add to Dashboard
-			</AntdButton>
+			</Button>
 		);
 	}, [disabled, isOneChartPerQuery, onAddToDashboard, splitedQueries]);
 
@@ -865,9 +864,7 @@ function ExplorerOptions({
 						<Button
 							className="action-icon"
 							onClick={handleClearSelect}
-							variant="outlined"
-							color="secondary"
-							prefix={<X size={14} />}
+							icon={<X size={14} />}
 						/>
 					</Tooltip>
 					{
@@ -884,9 +881,7 @@ function ExplorerOptions({
 									className={cx('action-icon', isEditDeleteSupported ? ' ' : 'hidden')}
 									disabled={isViewUpdating}
 									onClick={onUpdateQueryHandler}
-									variant="outlined"
-									color="secondary"
-									prefix={<Disc3 size={14} />}
+									icon={<Disc3 size={14} />}
 								/>
 							</Tooltip>
 						</>
@@ -941,7 +936,7 @@ function ExplorerOptions({
 							})}
 						</Select>
 
-						<AntdButton
+						<Button
 							shape="round"
 							onClick={handleSaveViewModalToggle}
 							className={isEditDeleteSupported ? '' : 'hidden'}
@@ -949,7 +944,7 @@ function ExplorerOptions({
 							icon={<Disc3 size={16} />}
 						>
 							Save this view
-						</AntdButton>
+						</Button>
 					</div>
 
 					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
@@ -980,7 +975,7 @@ function ExplorerOptions({
 						)}
 
 						<Tooltip title="Hide">
-							<AntdButton
+							<Button
 								disabled={disabled}
 								shape="circle"
 								onClick={hideToolbar}
@@ -1010,13 +1005,12 @@ function ExplorerOptions({
 				footer={[
 					<Button
 						key="submit"
+						type="primary"
+						icon={<Check size={16} />}
 						onClick={onSaveHandler}
 						disabled={isSaveViewLoading}
 						data-testid="save-view-btn"
 						className="save-button"
-						prefix={<Check size={16} />}
-						variant="outlined"
-						color="secondary"
 					>
 						Save this view
 					</Button>,