[WEB-3567] chore: empty state refactoring and translation fix (#8014)

* chore: empty state component improvement and code refactor

* chore: translation code refactor

* chore: empty state code refactor

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx

@@ -8,9 +8,9 @@ import useSWR from "swr";
 import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // components
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { SettingsHeading } from "@/components/settings/heading";
 import { WebhookSettingsLoader } from "@/components/ui/loader/settings/web-hook";
@@ -20,7 +20,6 @@ import { captureClick } from "@/helpers/event-tracker.helper";
 import { useWebhook } from "@/hooks/store/use-webhook";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 const WebhooksListPage = observer(() => {
   // states
@@ -35,7 +34,6 @@ const WebhooksListPage = observer(() => {
   const { currentWorkspace } = useWorkspace();
   // derived values
   const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/webhooks" });
 
   useSWR(
     workspaceSlug && canPerformWorkspaceAdminActions ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
@@ -90,21 +88,23 @@ const WebhooksListPage = observer(() => {
         ) : (
           <div className="flex h-full w-full flex-col">
             <div className="h-full w-full flex items-center justify-center">
-              <DetailedEmptyState
+              <EmptyStateCompact
-                className="!p-0"
+                assetKey="webhook"
-                title=""
+                title={t("settings.webhooks.title")}
-                description=""
+                description={t("settings.webhooks.description")}
-                assetPath={resolvedPath}
+                actions={[
-                size="md"
+                  {
-                primaryButton={{
+                    label: t("settings.webhooks.cta_primary"),
-                  text: t("workspace_settings.settings.webhooks.add_webhook"),
+                    onClick: () => {
-                  onClick: () => {
+                      captureClick({
-                    captureClick({
+                        elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_WEBHOOK_BUTTON,
-                      elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_WEBHOOK_BUTTON,
+                      });
-                    });
+                      setShowCreateWebhookModal(true);
-                    setShowCreateWebhookModal(true);
+                    },
                   },
-                }}
+                ]}
+                align="start"
+                rootClassName="py-20"
               />
             </div>
           </div>

apps/web/core/components/cycles/archived-cycles/root.tsx

@@ -4,15 +4,14 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { TCycleFilters } from "@plane/types";
 import { calculateTotalFilters } from "@plane/utils";
 // components
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // local imports
 import { CycleAppliedFiltersList } from "../applied-filters";
 import { ArchivedCyclesView } from "./view";
@@ -28,7 +27,6 @@ export const ArchivedCycleLayoutRoot: React.FC = observer(() => {
   const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useCycleFilter();
   // derived values
   const totalArchivedCycles = currentProjectArchivedCycleIds?.length ?? 0;
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/archived/empty-cycles" });
 
   useSWR(
     workspaceSlug && projectId ? `ARCHIVED_CYCLES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
@@ -69,10 +67,10 @@ export const ArchivedCycleLayoutRoot: React.FC = observer(() => {
       )}
       {totalArchivedCycles === 0 ? (
         <div className="h-full place-items-center">
-          <DetailedEmptyState
+          <EmptyStateDetailed
-            title={t("project_cycles.empty_state.archived.title")}
+            assetKey="archived-cycle"
-            description={t("project_cycles.empty_state.archived.description")}
+            title={t("workspace.archive_cycles.title")}
-            assetPath={resolvedPath}
+            description={t("workspace.archive_cycles.description")}
           />
         </div>
       ) : (

apps/web/core/components/exporter/prev-exports.tsx

@@ -4,15 +4,13 @@ import useSWR, { mutate } from "swr";
 import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IExportData } from "@plane/types";
 import { Table } from "@plane/ui";
 // components
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { ImportExportSettingsLoader } from "@/components/ui/loader/settings/import-and-export";
 // constants
 import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
-// hooks
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // services
 import { IntegrationService } from "@/services/integrations";
 // local imports
@@ -35,7 +33,6 @@ export const PrevExports = observer((props: Props) => {
   // hooks
   const { t } = useTranslation();
   const columns = useExportColumns();
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/exports" });
 
   const { data: exporterServices } = useSWR(
     workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
@@ -125,12 +122,12 @@ export const PrevExports = observer((props: Props) => {
             </div>
           ) : (
             <div className="flex h-full w-full items-center justify-center">
-              <DetailedEmptyState
+              <EmptyStateCompact
-                title={t("workspace_settings.empty_state.exports.title")}
+                assetKey="export"
-                description={t("workspace_settings.empty_state.exports.description")}
+                title={t("settings.exports.title")}
-                assetPath={resolvedPath}
+                description={t("settings.exports.description")}
-                className="w-full !px-0"
+                align="start"
-                size="sm"
+                rootClassName="py-20"
               />
             </div>
           )

apps/web/core/components/inbox/sidebar/root.tsx

@@ -162,6 +162,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
                     title="No request closed yet"
                     description="All the work items whether accepted or declined can be found here."
                     assetClassName="size-20"
+                    className="px-10"
                   />
                 )}
               </div>

apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx

@@ -3,15 +3,12 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
-// components
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 // hooks
-import { useIssues } from "@/hooks/store/use-issues";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ProjectArchivedEmptyState: React.FC = observer(() => {
   // router
@@ -22,48 +19,45 @@ export const ProjectArchivedEmptyState: React.FC = observer(() => {
   // plane hooks
   const { t } = useTranslation();
   // store hooks
-  const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
   const { allowPermissions } = useUserPermissions();
   // derived values
   const archivedWorkItemFilter = projectId
     ? useWorkItemFilterInstance(EIssuesStoreType.ARCHIVED, projectId)
     : undefined;
-  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
-  const additionalPath = archivedWorkItemFilter?.hasActiveFilters ? (activeLayout ?? "list") : undefined;
   const canPerformEmptyStateActions = allowPermissions(
     [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
     EUserPermissionsLevel.PROJECT
   );
-  const emptyFilterResolvedPath = useResolvedAssetPath({
-    basePath: "/empty-state/empty-filters/",
-    additionalPath: additionalPath,
-  });
-  const archivedIssuesResolvedPath = useResolvedAssetPath({
-    basePath: "/empty-state/archived/empty-issues",
-  });
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
       {archivedWorkItemFilter?.hasActiveFilters ? (
-        <DetailedEmptyState
+        <EmptyStateDetailed
-          title={t("project_issues.empty_state.issues_empty_filter.title")}
+          assetKey="search"
-          assetPath={emptyFilterResolvedPath}
+          title={t("common.search.title")}
-          secondaryButton={{
+          description={t("common.search.description")}
-            text: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),
+          actions={[
-            onClick: archivedWorkItemFilter?.clearFilters,
+            {
-            disabled: !canPerformEmptyStateActions || !archivedWorkItemFilter,
+              label: t("common.search.cta_secondary"),
-          }}
+              onClick: archivedWorkItemFilter?.clearFilters,
+              disabled: !canPerformEmptyStateActions || !archivedWorkItemFilter,
+              variant: "outline-primary",
+            },
+          ]}
         />
       ) : (
-        <DetailedEmptyState
+        <EmptyStateDetailed
-          title={t("project_issues.empty_state.no_archived_issues.title")}
+          assetKey="archived-work-item"
-          description={t("project_issues.empty_state.no_archived_issues.description")}
+          title={t("workspace.archive_work_items.title")}
-          assetPath={archivedIssuesResolvedPath}
+          description={t("workspace.archive_work_items.description")}
-          primaryButton={{
+          actions={[
-            text: t("project_issues.empty_state.no_archived_issues.primary_button.text"),
+            {
-            onClick: () => router.push(`/${workspaceSlug}/settings/projects/${projectId}/automations`),
+              label: t("workspace.archive_work_items.cta_primary"),
-            disabled: !canPerformEmptyStateActions,
+              onClick: () => router.push(`/${workspaceSlug}/settings/projects/${projectId}/automations`),
-          }}
+              disabled: !canPerformEmptyStateActions,
+              variant: "primary",
+            },
+          ]}
         />
       )}
     </div>

apps/web/core/components/modules/archived-modules/root.tsx

@@ -4,17 +4,16 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { TModuleFilters } from "@plane/types";
 // components
 import { calculateTotalFilters } from "@plane/utils";
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { ArchivedModulesView, ModuleAppliedFiltersList } from "@/components/modules";
 import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
 // helpers
 // hooks
 import { useModule } from "@/hooks/store/use-module";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
   // router
@@ -26,7 +25,6 @@ export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
   const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useModuleFilter();
   // derived values
   const totalArchivedModules = projectArchivedModuleIds?.length ?? 0;
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/archived/empty-modules" });
 
   useSWR(
     workspaceSlug && projectId ? `ARCHIVED_MODULES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
@@ -72,10 +70,10 @@ export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
       )}
       {totalArchivedModules === 0 ? (
         <div className="h-full place-items-center">
-          <DetailedEmptyState
+          <EmptyStateDetailed
-            title={t("project_module.empty_state.archived.title")}
+            assetKey="archived-module"
-            description={t("project_module.empty_state.archived.description")}
+            title={t("workspace.archive_modules.title")}
-            assetPath={resolvedPath}
+            description={t("workspace.archive_modules.description")}
           />
         </div>
       ) : (

packages/i18n/src/constants/language.ts

@@ -32,7 +32,7 @@ export enum ETranslationFiles {
   TRANSLATIONS = "translations",
   ACCESSIBILITY = "accessibility",
   EDITOR = "editor",
-  EMPTY_STATE = "emptyState",
+  EMPTY_STATE = "empty-state",
 }
 
 export const LANGUAGE_STORAGE_KEY = "userLanguage";

packages/i18n/src/locales/index.ts

@@ -12,114 +12,114 @@ export const locales = {
     translations: () => import("./en/translations"),
     accessibility: () => import("./en/accessibility"),
     editor: () => import("./en/editor"),
-    emptyState: () => import("./en/empty-state"),
+    "empty-state": () => import("./en/empty-state"),
   },
   fr: {
     translations: () => import("./fr/translations"),
     accessibility: () => import("./fr/accessibility"),
     editor: () => import("./fr/editor"),
-    emptyState: () => import("./fr/empty-state"),
+    "empty-state": () => import("./fr/empty-state"),
   },
   es: {
     translations: () => import("./es/translations"),
     accessibility: () => import("./es/accessibility"),
     editor: () => import("./es/editor"),
-    emptyState: () => import("./es/empty-state"),
+    "empty-state": () => import("./es/empty-state"),
   },
   ja: {
     translations: () => import("./ja/translations"),
     accessibility: () => import("./ja/accessibility"),
     editor: () => import("./ja/editor"),
-    emptyState: () => import("./ja/empty-state"),
+    "empty-state": () => import("./ja/empty-state"),
   },
   "zh-CN": {
     translations: () => import("./zh-CN/translations"),
     accessibility: () => import("./zh-CN/accessibility"),
     editor: () => import("./zh-CN/editor"),
-    emptyState: () => import("./zh-CN/empty-state"),
+    "empty-state": () => import("./zh-CN/empty-state"),
   },
   "zh-TW": {
     translations: () => import("./zh-TW/translations"),
     accessibility: () => import("./zh-TW/accessibility"),
     editor: () => import("./zh-TW/editor"),
-    emptyState: () => import("./zh-TW/empty-state"),
+    "empty-state": () => import("./zh-TW/empty-state"),
   },
   ru: {
     translations: () => import("./ru/translations"),
     accessibility: () => import("./ru/accessibility"),
     editor: () => import("./ru/editor"),
-    emptyState: () => import("./ru/empty-state"),
+    "empty-state": () => import("./ru/empty-state"),
   },
   it: {
     translations: () => import("./it/translations"),
     accessibility: () => import("./it/accessibility"),
     editor: () => import("./it/editor"),
-    emptyState: () => import("./it/empty-state"),
+    "empty-state": () => import("./it/empty-state"),
   },
   cs: {
     translations: () => import("./cs/translations"),
     accessibility: () => import("./cs/accessibility"),
     editor: () => import("./cs/editor"),
-    emptyState: () => import("./cs/empty-state"),
+    "empty-state": () => import("./cs/empty-state"),
   },
   sk: {
     translations: () => import("./sk/translations"),
     accessibility: () => import("./sk/accessibility"),
     editor: () => import("./sk/editor"),
-    emptyState: () => import("./sk/empty-state"),
+    "empty-state": () => import("./sk/empty-state"),
   },
   de: {
     translations: () => import("./de/translations"),
     accessibility: () => import("./de/accessibility"),
     editor: () => import("./de/editor"),
-    emptyState: () => import("./de/empty-state"),
+    "empty-state": () => import("./de/empty-state"),
   },
   ua: {
     translations: () => import("./ua/translations"),
     accessibility: () => import("./ua/accessibility"),
     editor: () => import("./ua/editor"),
-    emptyState: () => import("./ua/empty-state"),
+    "empty-state": () => import("./ua/empty-state"),
   },
   pl: {
     translations: () => import("./pl/translations"),
     accessibility: () => import("./pl/accessibility"),
     editor: () => import("./pl/editor"),
-    emptyState: () => import("./pl/empty-state"),
+    "empty-state": () => import("./pl/empty-state"),
   },
   ko: {
     translations: () => import("./ko/translations"),
     accessibility: () => import("./ko/accessibility"),
     editor: () => import("./ko/editor"),
-    emptyState: () => import("./ko/empty-state"),
+    "empty-state": () => import("./ko/empty-state"),
   },
   "pt-BR": {
     translations: () => import("./pt-BR/translations"),
     accessibility: () => import("./pt-BR/accessibility"),
     editor: () => import("./pt-BR/editor"),
-    emptyState: () => import("./pt-BR/empty-state"),
+    "empty-state": () => import("./pt-BR/empty-state"),
   },
   id: {
     translations: () => import("./id/translations"),
     accessibility: () => import("./id/accessibility"),
     editor: () => import("./id/editor"),
-    emptyState: () => import("./id/empty-state"),
+    "empty-state": () => import("./id/empty-state"),
   },
   ro: {
     translations: () => import("./ro/translations"),
     accessibility: () => import("./ro/accessibility"),
     editor: () => import("./ro/editor"),
-    emptyState: () => import("./ro/empty-state"),
+    "empty-state": () => import("./ro/empty-state"),
   },
   "vi-VN": {
     translations: () => import("./vi-VN/translations"),
     accessibility: () => import("./vi-VN/accessibility"),
     editor: () => import("./vi-VN/editor"),
-    emptyState: () => import("./vi-VN/empty-state"),
+    "empty-state": () => import("./vi-VN/empty-state"),
   },
   "tr-TR": {
     translations: () => import("./tr-TR/translations"),
     accessibility: () => import("./tr-TR/accessibility"),
     editor: () => import("./tr-TR/editor"),
-    emptyState: () => import("./tr-TR/empty-state"),
+    "empty-state": () => import("./tr-TR/empty-state"),
   },
 };

packages/propel/src/empty-state/assets/asset-registry.tsx

@@ -39,6 +39,7 @@ import {
   DraftVerticalStackIllustration,
   EpicVerticalStackIllustration,
   Error404VerticalStackIllustration,
+  InitiativeVerticalStackIllustration,
   InvalidLinkVerticalStackIllustration,
   ModuleVerticalStackIllustration,
   NoAccessVerticalStackIllustration,
@@ -85,6 +86,7 @@ export const VERTICAL_STACK_ASSETS: Record<VerticalStackAssetType, React.Compone
   draft: DraftVerticalStackIllustration,
   epic: EpicVerticalStackIllustration,
   "error-404": Error404VerticalStackIllustration,
+  initiative: InitiativeVerticalStackIllustration,
   "invalid-link": InvalidLinkVerticalStackIllustration,
   module: ModuleVerticalStackIllustration,
   "no-access": NoAccessVerticalStackIllustration,

packages/propel/src/empty-state/assets/asset-types.ts

@@ -32,6 +32,7 @@ export type VerticalStackAssetType =
   | "draft"
   | "epic"
   | "error-404"
+  | "initiative"
   | "invalid-link"
   | "module"
   | "no-access"

packages/propel/src/empty-state/assets/vertical-stack/constant.tsx

@@ -8,6 +8,7 @@ import {
   DraftVerticalStackIllustration,
   EpicVerticalStackIllustration,
   Error404VerticalStackIllustration,
+  InitiativeVerticalStackIllustration,
   InvalidLinkVerticalStackIllustration,
   ModuleVerticalStackIllustration,
   NoAccessVerticalStackIllustration,
@@ -56,6 +57,10 @@ export const VerticalStackAssetsMap = [
     asset: <Error404VerticalStackIllustration />,
     title: "Error404VerticalStackIllustration",
   },
+  {
+    asset: <InitiativeVerticalStackIllustration />,
+    title: "InitiativeVerticalStackIllustration",
+  },
   {
     asset: <InvalidLinkVerticalStackIllustration />,
     title: "InvalidLinkVerticalStackIllustration",

packages/propel/src/empty-state/compact-empty-state.tsx

@@ -15,6 +15,7 @@ export const EmptyStateCompact: React.FC<BaseEmptyStateCommonProps> = ({
   rootClassName,
   assetClassName,
   align = "center",
+  customButton,
 }) => {
   // Determine which asset to use: assetKey takes precedence, fallback to custom asset
   const resolvedAsset = assetKey ? getCompactAsset(assetKey as CompactAssetType, assetClassName) : asset;
@@ -39,18 +40,21 @@ export const EmptyStateCompact: React.FC<BaseEmptyStateCommonProps> = ({
             title && <p className="text-sm leading-5 text-custom-text-300">{title}</p>
           )}
 
-          {actions && actions.length > 0 && (
+          {customButton
-            <div className="flex flex-col gap-4 sm:flex-row">
+            ? customButton
-              {actions.map((action, index) => {
+            : actions &&
-                const { label, variant, ...rest } = action;
+              actions.length > 0 && (
-                return (
+                <div className="flex flex-col gap-4 sm:flex-row">
-                  <Button key={index} variant={variant} {...rest}>
+                  {actions.map((action, index) => {
-                    {label}
+                    const { label, variant, ...rest } = action;
-                  </Button>
+                    return (
-                );
+                      <Button key={index} variant={variant} {...rest}>
-              })}
+                        {label}
-            </div>
+                      </Button>
-          )}
+                    );
+                  })}
+                </div>
+              )}
         </div>
       </div>
     </div>

packages/propel/src/empty-state/detailed-empty-state.tsx

@@ -14,6 +14,7 @@ export const EmptyStateDetailed: React.FC<BaseEmptyStateCommonProps> = ({
   className,
   rootClassName,
   assetClassName,
+  customButton,
 }) => {
   // Determine which asset to use: assetKey takes precedence, fallback to custom asset
   const resolvedAsset = assetKey ? getDetailedAsset(assetKey as DetailedAssetType, assetClassName) : asset;
@@ -31,18 +32,21 @@ export const EmptyStateDetailed: React.FC<BaseEmptyStateCommonProps> = ({
             </div>
           )}
 
-          {actions && actions.length > 0 && (
+          {customButton
-            <div className="flex flex-col gap-4 sm:flex-row">
+            ? customButton
-              {actions.map((action, index) => {
+            : actions &&
-                const { label, variant, ...rest } = action;
+              actions.length > 0 && (
-                return (
+                <div className="flex flex-col gap-4 sm:flex-row">
-                  <Button key={index} variant={variant} {...rest}>
+                  {actions.map((action, index) => {
-                    {label}
+                    const { label, variant, ...rest } = action;
-                  </Button>
+                    return (
-                );
+                      <Button key={index} variant={variant} {...rest}>
-              })}
+                        {label}
-            </div>
+                      </Button>
-          )}
+                    );
+                  })}
+                </div>
+              )}
         </div>
       </div>
     </div>

packages/propel/src/empty-state/types.ts

@@ -21,4 +21,5 @@ export interface BaseEmptyStateCommonProps {
   assetKey?: CompactAssetType | DetailedAssetType;
   asset?: React.ReactNode;
   align?: TAlign;
+  customButton?: React.ReactNode;
 }