diff --git a/jest.config.mjs b/jest.config.mjs
index 1851966fd4..fcfd62f029 100644
--- a/jest.config.mjs
+++ b/jest.config.mjs
@@ -56,6 +56,8 @@ const [initialProjectOptions] = [
         moduleNameMapper: {
             ...pathsToModuleNameMapper(tsconfig.compilerOptions.paths, { prefix: '<rootDir>/' }),
             '^.+\\.css$': 'identity-obj-proxy',
+            // TODO remove test
+            'postcss-each': path.join(import.meta.dirname, 'tools/postcss/postcss-each.cjs'),
         },
         testPathIgnorePatterns: IGNORED_PACKAGES.map((pkg) => {
             const relativeDir = path.relative(import.meta.dirname, resolveInternal(pkg));
diff --git a/package.json b/package.json
index a49a95cc43..1794900989 100644
--- a/package.json
+++ b/package.json
@@ -146,7 +146,6 @@
         "postcss-color-mod-function": "^4.1.1",
         "postcss-custom-media": "^8.0.2",
         "postcss-custom-properties": "^12.1.10",
-        "postcss-each": "^1.1.0",
         "postcss-export-custom-variables": "^1.0.0",
         "postcss-for": "^2.1.1",
         "postcss-import": "^16.1.1",
@@ -154,6 +153,7 @@
         "postcss-mixins": "^7.0.3",
         "postcss-modules": "^6.0.1",
         "postcss-preset-env": "^7.8.3",
+        "postcss-simple-vars": "^7.0.1",
         "prettier": "~3.6.2",
         "querystring-es3": "^0.2.1",
         "raw-loader": "^4.0.1",
diff --git a/packages/action-button/package.json b/packages/action-button/package.json
index ebf3acf9f7..b3644f8c0c 100644
--- a/packages/action-button/package.json
+++ b/packages/action-button/package.json
@@ -10,9 +10,8 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
+        "@alfalab/core-components-button": "^13.1.0",
         "@alfalab/core-components-shared": "^2.1.0",
-        "@alfalab/core-components-spinner": "^6.0.2",
-        "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
diff --git a/packages/action-button/src/Component.screenshots.test.tsx b/packages/action-button/src/Component.screenshots.test.tsx
index 94d9f070fe..5d7080deee 100644
--- a/packages/action-button/src/Component.screenshots.test.tsx
+++ b/packages/action-button/src/Component.screenshots.test.tsx
@@ -87,8 +87,10 @@ describe(
             },
         }),
         screenshotOpts: { clip },
-        evaluate: (page: Page) =>
-            page.hover('button[class^=component]').then(() => page.waitForTimeout(500)),
+        evaluate: async (page) => {
+            await page.hover('button[class*=component]');
+            await page.waitForTimeout(500);
+        },
         matchImageSnapshotOptions: {
             customSnapshotIdentifier: (...args) => `hover-${customSnapshotIdentifier(...args)}`,
         },
@@ -106,10 +108,10 @@ describe(
             },
         }),
         screenshotOpts: { clip },
-        evaluate: (page: Page) => {
-            return page.mouse
-                .move(30, 30)
-                .then(() => page.mouse.down().then(() => page.waitForTimeout(500)));
+        evaluate: async (page) => {
+            await page.mouse.move(30, 30);
+            await page.mouse.down();
+            await page.waitForTimeout(500);
         },
         matchImageSnapshotOptions: {
             customSnapshotIdentifier: (...args) => `pressed-${customSnapshotIdentifier(...args)}`,
diff --git a/packages/action-button/src/Component.test.tsx b/packages/action-button/src/Component.test.tsx
index 14d86bbb1f..9ebe913bc3 100644
--- a/packages/action-button/src/Component.test.tsx
+++ b/packages/action-button/src/Component.test.tsx
@@ -20,20 +20,16 @@ describe('ActionButton', () => {
     it('should use "size" prop', () => {
         const size = 48;
 
-        render(<ActionButton size={size} />);
+        render(<ActionButton icon={null} size={size} />);
 
-        expect(screen.getByRole('button')).toHaveClass('size-48');
-    });
-
-    it('should use "size" prop "s" by default', () => {
-        render(<ActionButton />);
-
-        expect(screen.getByRole('button')).toHaveClass('size-48');
+        expect(screen.getByRole('button')).toHaveClass('size48');
     });
 
     it('should use "iconWrapperClassName" prop', () => {
         const iconClassName = 'test-class';
-        const { container } = render(<ActionButton iconWrapperClassName={iconClassName} />);
+        const { container } = render(
+            <ActionButton icon={null} iconWrapperClassName={iconClassName} />,
+        );
 
         expect(container.querySelector(`.${iconClassName}`)).toBeInTheDocument();
     });
@@ -41,57 +37,65 @@ describe('ActionButton', () => {
     it('should use "href" prop and become a link', () => {
         const href = 'http://127.0.0.1';
 
-        render(<ActionButton href={href} />);
+        render(<ActionButton icon={null} href={href} dataTestId={dti} />);
 
-        expect(screen.getByRole('button')).toHaveAttribute('href', href);
+        expect(screen.getByTestId(dti)).toHaveAttribute('href', href);
     });
 
     it('should use "disabled" prop (button)', () => {
-        const { rerender } = render(<ActionButton />);
+        const { rerender } = render(<ActionButton icon={null} />);
 
         expect(screen.getByRole('button')).not.toBeDisabled();
 
-        rerender(<ActionButton disabled={true} />);
+        rerender(<ActionButton icon={null} disabled={true} />);
 
         expect(screen.getByRole('button')).toBeDisabled();
     });
 
     it('should use "disabled" prop (link)', () => {
-        const { rerender } = render(<ActionButton href='http://localhost' />);
+        const { rerender } = render(
+            <ActionButton icon={null} href='http://localhost' dataTestId={dti} />,
+        );
 
-        expect(screen.getByRole('button')).not.toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).not.toHaveAttribute('aria-disabled', 'true');
 
-        rerender(<ActionButton href='http://localhost' disabled={true} />);
+        rerender(
+            <ActionButton icon={null} href='http://localhost' dataTestId={dti} disabled={true} />,
+        );
 
-        expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).toHaveAttribute('aria-disabled', 'true');
     });
 
     it('should use "loading" prop (button)', () => {
-        const { rerender } = render(<ActionButton dataTestId={dti} />);
+        const { rerender } = render(<ActionButton icon={null} dataTestId={dti} />);
 
         expect(screen.getByRole('button')).not.toBeDisabled();
         expect(screen.queryByTestId(loaderDti)).toBeNull();
 
-        rerender(<ActionButton loading={true} dataTestId={dti} />);
+        rerender(<ActionButton icon={null} loading={true} dataTestId={dti} />);
 
         expect(screen.getByRole('button')).toBeDisabled();
         expect(screen.getByTestId(loaderDti)).toBeInTheDocument();
     });
 
     it('should use "loading" prop (link)', () => {
-        const { rerender } = render(<ActionButton href='http://localhost' dataTestId={dti} />);
+        const { rerender } = render(
+            <ActionButton icon={null} href='http://localhost' dataTestId={dti} />,
+        );
 
-        expect(screen.getByRole('button')).not.toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).not.toHaveAttribute('aria-disabled', 'true');
         expect(screen.queryByTestId(loaderDti)).toBeNull();
 
-        rerender(<ActionButton href='http://localhost' loading={true} dataTestId={dti} />);
+        rerender(
+            <ActionButton icon={null} href='http://localhost' loading={true} dataTestId={dti} />,
+        );
 
-        expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).toHaveAttribute('aria-disabled', 'true');
         expect(screen.getByTestId(loaderDti)).toBeInTheDocument();
     });
 
     it('should use "dataTestId" prop', () => {
-        render(<ActionButton dataTestId={dti} />);
+        render(<ActionButton icon={null} dataTestId={dti} />);
 
         expect(screen.getByRole('button')).toHaveAttribute('data-test-id', dti);
     });
@@ -99,7 +103,7 @@ describe('ActionButton', () => {
     it('should use "children" prop', () => {
         const label = 'Action Button';
 
-        render(<ActionButton>{label}</ActionButton>);
+        render(<ActionButton icon={null}>{label}</ActionButton>);
 
         expect(screen.getByRole('button')).toHaveTextContent(label);
     });
@@ -107,7 +111,7 @@ describe('ActionButton', () => {
     it('should use "className" prop', () => {
         const className = 'test-class';
 
-        render(<ActionButton className={className} />);
+        render(<ActionButton icon={null} className={className} />);
 
         expect(screen.getByRole('button')).toHaveClass(className);
     });
@@ -115,7 +119,7 @@ describe('ActionButton', () => {
     it('should call "onClick" prop', async () => {
         const cb = jest.fn();
 
-        render(<ActionButton onClick={cb} />);
+        render(<ActionButton icon={null} onClick={cb} />);
 
         await userEvent.click(screen.getByRole('button'));
 
@@ -124,11 +128,28 @@ describe('ActionButton', () => {
 
     it('should have data-test-id', () => {
         const dti = 'action-button-dti';
-        const { getByTestId } = render(<ActionButton dataTestId={dti} loading />);
+        const { getByTestId } = render(<ActionButton icon={null} dataTestId={dti} loading />);
 
         const testIds = getActionButtonTestIds(dti);
 
         expect(getByTestId(testIds.actionButton)).toBeInTheDocument();
         expect(getByTestId(testIds.spinner)).toBeInTheDocument();
     });
+
+    it('should pass "loaderClassName"', () => {
+        const dti = 'action-button-dti';
+        const loaderClassName = 'foo';
+        const { getByTestId } = render(
+            <ActionButton
+                icon={null}
+                dataTestId={dti}
+                loading={true}
+                loaderClassName={loaderClassName}
+            />,
+        );
+
+        const testIds = getActionButtonTestIds(dti);
+
+        expect(getByTestId(testIds.spinner)).toHaveClass(loaderClassName);
+    });
 });
diff --git a/packages/action-button/src/Component.tsx b/packages/action-button/src/Component.tsx
index 4bce3faceb..623e0dd918 100644
--- a/packages/action-button/src/Component.tsx
+++ b/packages/action-button/src/Component.tsx
@@ -1,19 +1,14 @@
-import React, {
-    type AnchorHTMLAttributes,
-    type ButtonHTMLAttributes,
-    forwardRef,
-    Fragment,
-    useRef,
-} from 'react';
+import React, { forwardRef, type ReactNode } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { getDataTestId } from '@alfalab/core-components-shared';
-import { Spinner } from '@alfalab/core-components-spinner';
-import { useFocus } from '@alfalab/hooks';
-
-import { LOADER_MIN_DISPLAY_INTERVAL } from './constants/loader-min-display-interval';
-import { useLoader } from './hooks';
+import {
+    BaseButtonCandidate,
+    type BaseButtonOwnProps,
+    type ButtonPropsFactory,
+} from '@alfalab/core-components-button/components/base-button-candidate';
+import { ButtonContent } from '@alfalab/core-components-button/components/button-content';
+import { useLoading } from '@alfalab/core-components-button/shared';
 
 import defaultColors from './default.module.css';
 import styles from './index.module.css';
@@ -24,15 +19,14 @@ const colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
     static: staticColors,
-};
-
-type Colors = 'default' | 'inverted' | 'static';
+} as const;
 
-type ComponentProps = {
+interface ComponentProps
+    extends Omit<BaseButtonOwnProps, 'disabledClassName' | 'Content' | 'block'> {
     /**
      * Иконка кнопки
      */
-    icon: React.ReactNode;
+    icon: ReactNode;
 
     /**
      *  Размер кнопки
@@ -44,142 +38,79 @@ type ComponentProps = {
      */
     view?: 'primary' | 'secondary';
 
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-
     /**
      * Дополнительный класс для обертки иконки
      */
     iconWrapperClassName?: string;
 
-    /**
-     * Значение href для ссылки
-     */
-    href?: string;
-
-    /**
-     * Заблокировать кнопку
-     */
-    disabled?: boolean;
-
-    /**
-     * Показать лоадер
-     */
-    loading?: boolean;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для спиннера используется модификатор -loader
-     */
-    dataTestId?: string;
-
     /**
      * Палитра, в контексте которой используется кнопка
      */
-    colors?: Colors;
-};
+    colors?: 'default' | 'inverted' | 'static';
+}
 
-type AnchorProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type ButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-export type ActionButtonProps = Partial<AnchorProps | ButtonProps>;
+export type ActionButtonProps = ButtonPropsFactory<ComponentProps>;
 
 export const ActionButton = forwardRef<HTMLAnchorElement | HTMLButtonElement, ActionButtonProps>(
     (
         {
-            className,
+            className: classNameFromProps,
             icon,
             children,
-            href,
             size = 48,
             view = 'primary',
-            type = 'button',
             iconWrapperClassName,
             disabled,
-            loading,
-            dataTestId,
+            loading: loadingFromProps,
             colors = 'default',
-            ...rest
+            dataTestId,
+            loaderClassName,
+            ...restProps
         },
         ref,
     ) => {
-        const componentRef = useRef<HTMLElement>(null);
-
-        const [focused] = useFocus(componentRef, 'keyboard');
-
-        const { showLoader } = useLoader(!!loading, LOADER_MIN_DISPLAY_INTERVAL);
-
-        const styleSize = `size-${size}`;
-
-        const componentProps = {
-            className: cn(
-                styles.component,
-                colorStyles[colors][view],
-                styles[styleSize],
-                {
-                    [styles.focused]: focused,
-                    [styles.disabled]: disabled,
-                    [colorStyles[colors].disabled]: disabled,
-                    [styles.loading]: showLoader,
-                },
-                className,
-            ),
-            'data-test-id': dataTestId,
-        };
+        const loading = useLoading(loadingFromProps);
+        const className = cn(
+            styles.component,
+            colorStyles[colors].component,
+            colorStyles[colors][view],
+            styles[`size${size}`],
+            loading && [colorStyles[colors].loading, styles.loading],
+            classNameFromProps,
+        );
 
-        const buttonChildren = (
-            <Fragment>
-                <span
+        return (
+            <BaseButtonCandidate
+                {...restProps}
+                dataTestId={dataTestId}
+                ref={mergeRefs([ref])}
+                className={className}
+                disabled={disabled}
+                disabledClassName={colorStyles[colors].disabled}
+                loading={loading}
+            >
+                <div
                     role='img'
                     className={cn(
                         styles.iconWrapper,
                         colorStyles[colors].iconWrapper,
-                        styles[styleSize],
                         iconWrapperClassName,
                     )}
                 >
-                    {showLoader ? (
-                        <Spinner
-                            preset={24}
-                            dataTestId={getDataTestId(dataTestId, 'loader')}
-                            visible={true}
-                            className={cn(styles.loader, colorStyles[colors].loader)}
-                        />
-                    ) : (
-                        icon
-                    )}
-                </span>
+                    <ButtonContent
+                        loading={loading}
+                        loaderClassName={cn(
+                            styles.loader,
+                            colorStyles[colors].loader,
+                            loaderClassName,
+                        )}
+                        dataTestId={dataTestId}
+                    >
+                        {icon}
+                    </ButtonContent>
+                </div>
                 <span className={styles.label}>{children}</span>
-            </Fragment>
-        );
-
-        if (href) {
-            return (
-                <a
-                    role='button'
-                    ref={mergeRefs([componentRef, ref])}
-                    href={href}
-                    aria-disabled={disabled || loading}
-                    {...componentProps}
-                    {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}
-                >
-                    {buttonChildren}
-                </a>
-            );
-        }
-
-        return (
-            <button
-                ref={mergeRefs([componentRef, ref])}
-                // eslint-disable-next-line react/button-has-type
-                type={type as ButtonHTMLAttributes<HTMLButtonElement>['type']}
-                disabled={disabled || loading}
-                {...componentProps}
-                {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}
-            >
-                {buttonChildren}
-            </button>
+            </BaseButtonCandidate>
         );
     },
 );
diff --git a/packages/action-button/src/__image_snapshots__/action-button-disabled-loading-sprite-snap.png b/packages/action-button/src/__image_snapshots__/action-button-disabled-loading-sprite-snap.png
index 8b7f8858d5..7d012b7441 100644
--- a/packages/action-button/src/__image_snapshots__/action-button-disabled-loading-sprite-snap.png
+++ b/packages/action-button/src/__image_snapshots__/action-button-disabled-loading-sprite-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a48ee688b03ea661724b4b1a80dd1a2a0b2fda4bf6b42e31857dc79c167537bd
-size 23117
+oid sha256:9c2b984531f5d9128efe25f6231c9e3c28cdec3691c19ad4778237fb0db00015
+size 22921
diff --git a/packages/action-button/src/default.module.css b/packages/action-button/src/default.module.css
index 1180709089..01623ce266 100644
--- a/packages/action-button/src/default.module.css
+++ b/packages/action-button/src/default.module.css
@@ -25,57 +25,65 @@
     --action-button-disabled-bg-color: var(--color-light-neutral-100);
 }
 
-.primary {
-    color: var(--action-button-primary-base-color);
+.component {
+    &.primary {
+        color: var(--action-button-primary-base-color);
 
-    & .iconWrapper {
-        color: var(--action-button-primary-base-icon-color);
-        background-color: var(--action-button-primary-base-bg-color);
-    }
+        .iconWrapper {
+            color: var(--action-button-primary-base-icon-color);
+            background-color: var(--action-button-primary-base-bg-color);
+        }
 
-    @media (hover: hover) {
-        &:hover .iconWrapper {
-            background-color: var(--action-button-primary-hover-color);
+        @mixin not-disabled {
+            @mixin hover {
+                .iconWrapper {
+                    background-color: var(--action-button-primary-hover-color);
+                }
+            }
+
+            &:active .iconWrapper {
+                background-color: var(--action-button-primary-active-color);
+            }
         }
-    }
 
-    &:active .iconWrapper {
-        background-color: var(--action-button-primary-active-color);
+        .loader {
+            color: var(--action-button-spinner-primary-color);
+        }
     }
 
-    & .loader {
-        color: var(--action-button-spinner-primary-color);
-    }
-}
+    &.secondary {
+        color: var(--action-button-secondary-base-color);
 
-.secondary {
-    color: var(--action-button-secondary-base-color);
+        .iconWrapper {
+            color: var(--action-button-secondary-base-icon-color);
+            background-color: var(--action-button-secondary-base-bg-color);
+        }
 
-    & .iconWrapper {
-        color: var(--action-button-secondary-base-icon-color);
-        background-color: var(--action-button-secondary-base-bg-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                .iconWrapper {
+                    background-color: var(--action-button-secondary-hover-color);
+                }
+            }
 
-    @media (hover: hover) {
-        &:hover .iconWrapper {
-            background-color: var(--action-button-secondary-hover-color);
+            &:active .iconWrapper {
+                background-color: var(--action-button-secondary-active-color);
+            }
         }
-    }
-
-    &:active .iconWrapper {
-        background-color: var(--action-button-secondary-active-color);
-    }
 
-    & .loader {
-        color: var(--action-button-spinner-default-color);
+        .loader {
+            color: var(--action-button-spinner-default-color);
+        }
     }
-}
 
-.disabled {
-    color: var(--action-button-disabled-color);
+    @mixin disabled {
+        &:not(.loading) {
+            color: var(--action-button-disabled-color);
 
-    & .iconWrapper {
-        color: var(--action-button-disabled-icon-color);
-        background-color: var(--action-button-disabled-bg-color);
+            .iconWrapper {
+                color: var(--action-button-disabled-icon-color);
+                background-color: var(--action-button-disabled-bg-color);
+            }
+        }
     }
 }
diff --git a/packages/action-button/src/docs/description.mdx b/packages/action-button/src/docs/description.mdx
index 2314427a33..97afd239d0 100644
--- a/packages/action-button/src/docs/description.mdx
+++ b/packages/action-button/src/docs/description.mdx
@@ -29,7 +29,7 @@ render(() => {
 Лейбл кнопки ограничен двумя строками.
 
 ```jsx live
-    <ActionButton nowrap={true} icon={<DiamondsMIcon />} view='primary'>
+    <ActionButton icon={<DiamondsMIcon />} view='primary'>
         Пример переноса текста
     </ActionButton>
 ```
diff --git a/packages/action-button/src/index.module.css b/packages/action-button/src/index.module.css
index 6415dfe952..6b1493cc3e 100644
--- a/packages/action-button/src/index.module.css
+++ b/packages/action-button/src/index.module.css
@@ -1,77 +1,44 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .component {
-    position: relative;
-    display: inline-flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    vertical-align: top;
+    flex-direction: column;
+    flex-wrap: nowrap;
     width: 80px;
     min-height: 80px;
     max-height: 100px;
-    padding: var(--gap-0);
-    margin: var(--gap-0);
-    background: none;
-    border: none;
-    cursor: pointer;
-    outline: none;
-    text-align: center;
-    text-decoration: none;
-    text-transform: none;
-    transition:
-        color 0.2s ease,
-        opacity 0.2s ease;
-    user-select: none;
-    font-family: inherit;
-    appearance: none;
-    -webkit-tap-highlight-color: transparent;
-
-    &.size-48 {
-        @mixin action_primary_small;
+    transition: color 0.2s ease;
+
+    /* prettier-ignore */
+    @each $size, $mixin in (48, action_primary_small) {
+        &.size$(size) {
+            @mixin $(mixin);
+
+            .iconWrapper {
+                width: $(size)px;
+                height: $(size)px;
+            }
+        }
     }
 }
 
-.disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.loading {
-    cursor: auto;
-    pointer-events: none;
-}
-
 .iconWrapper {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-bottom: var(--gap-12);
     border-radius: var(--border-radius-circle);
-    transition: background-color 0.2s ease;
+    transition:
+        opacity 0.2s ease,
+        background 0.2s ease;
     line-height: 0;
 
-    &.size-48 {
-        width: 48px;
-        height: 48px;
+    .loading & > *:not(.loader) {
+        opacity: 0;
     }
 }
 
 .label {
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-
-.loader {
-    position: absolute;
-    left: var(--gap-0);
-    right: var(--gap-0);
-    margin: var(--gap-0) auto;
-}
-
-.focused {
-    @mixin focus-outline;
+    @mixin row_limit 2;
 }
diff --git a/packages/action-button/src/inverted.module.css b/packages/action-button/src/inverted.module.css
index 95c703a389..55e83737a5 100644
--- a/packages/action-button/src/inverted.module.css
+++ b/packages/action-button/src/inverted.module.css
@@ -33,57 +33,65 @@
     --action-button-inverted-disabled-bg-color: var(--color-light-neutral-100-inverted);
 }
 
-.primary {
-    color: var(--action-button-inverted-primary-base-color);
+.component {
+    &.primary {
+        color: var(--action-button-inverted-primary-base-color);
 
-    & .iconWrapper {
-        color: var(--action-button-inverted-primary-base-icon-color);
-        background-color: var(--action-button-inverted-primary-base-bg-color);
-    }
+        .iconWrapper {
+            color: var(--action-button-inverted-primary-base-icon-color);
+            background-color: var(--action-button-inverted-primary-base-bg-color);
+        }
 
-    @media (hover: hover) {
-        &:hover .iconWrapper {
-            background-color: var(--action-button-inverted-primary-hover-color);
+        @mixin not-disabled {
+            @mixin hover {
+                .iconWrapper {
+                    background-color: var(--action-button-inverted-primary-hover-color);
+                }
+            }
+
+            &:active .iconWrapper {
+                background-color: var(--action-button-inverted-primary-active-color);
+            }
         }
-    }
 
-    &:active .iconWrapper {
-        background-color: var(--action-button-inverted-primary-active-color);
+        .loader {
+            color: var(--action-button-spinner-inverted-primary-color);
+        }
     }
 
-    & .loader {
-        color: var(--action-button-spinner-inverted-primary-color);
-    }
-}
+    &.secondary {
+        color: var(--action-button-inverted-secondary-base-color);
 
-.secondary {
-    color: var(--action-button-inverted-secondary-base-color);
+        .iconWrapper {
+            color: var(--action-button-inverted-secondary-base-icon-color);
+            background-color: var(--action-button-inverted-secondary-base-bg-color);
+        }
 
-    & .iconWrapper {
-        color: var(--action-button-inverted-secondary-base-icon-color);
-        background-color: var(--action-button-inverted-secondary-base-bg-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                .iconWrapper {
+                    background-color: var(--action-button-inverted-secondary-hover-color);
+                }
+            }
 
-    @media (hover: hover) {
-        &:hover .iconWrapper {
-            background-color: var(--action-button-inverted-secondary-hover-color);
+            &:active .iconWrapper {
+                background-color: var(--action-button-inverted-secondary-active-color);
+            }
         }
-    }
-
-    &:active .iconWrapper {
-        background-color: var(--action-button-inverted-secondary-active-color);
-    }
 
-    & .loader {
-        color: var(--action-button-spinner-inverted-default-color);
+        .loader {
+            color: var(--action-button-spinner-inverted-default-color);
+        }
     }
-}
 
-.disabled {
-    color: var(--action-button-inverted-disabled-color);
+    @mixin disabled {
+        &:not(.loading) {
+            color: var(--action-button-inverted-disabled-color);
 
-    & .iconWrapper {
-        color: var(--action-button-inverted-disabled-icon-color);
-        background-color: var(--action-button-inverted-disabled-bg-color);
+            .iconWrapper {
+                color: var(--action-button-inverted-disabled-icon-color);
+                background-color: var(--action-button-inverted-disabled-bg-color);
+            }
+        }
     }
 }
diff --git a/packages/action-button/src/static.module.css b/packages/action-button/src/static.module.css
index 9936c2819f..2432e4e721 100644
--- a/packages/action-button/src/static.module.css
+++ b/packages/action-button/src/static.module.css
@@ -25,37 +25,41 @@
     --action-button-static-disabled-bg-color: var(--color-static-neutral-100);
 }
 
-.primary {
-    color: var(--action-button-static-primary-base-color);
+.component {
+    &.primary {
+        color: var(--action-button-static-primary-base-color);
 
-    & .iconWrapper {
-        color: var(--action-button-static-primary-base-icon-color);
-        background-color: var(--action-button-static-primary-base-bg-color);
-    }
+        .iconWrapper {
+            color: var(--action-button-static-primary-base-icon-color);
+            background-color: var(--action-button-static-primary-base-bg-color);
+        }
 
-    & .loader {
-        color: var(--action-button-spinner-static-primary-color);
+        .loader {
+            color: var(--action-button-spinner-static-primary-color);
+        }
     }
-}
 
-.secondary {
-    color: var(--action-button-static-secondary-base-color);
+    &.secondary {
+        color: var(--action-button-static-secondary-base-color);
 
-    & .iconWrapper {
-        color: var(--action-button-static-secondary-base-icon-color);
-        background-color: var(--action-button-static-secondary-base-bg-color);
-    }
+        .iconWrapper {
+            color: var(--action-button-static-secondary-base-icon-color);
+            background-color: var(--action-button-static-secondary-base-bg-color);
+        }
 
-    & .loader {
-        color: var(--action-button-spinner-static-secondary-color);
+        .loader {
+            color: var(--action-button-spinner-static-secondary-color);
+        }
     }
-}
 
-.disabled {
-    color: var(--action-button-static-disabled-color);
+    @mixin disabled {
+        &:not(.loading) {
+            color: var(--action-button-static-disabled-color);
 
-    & .iconWrapper {
-        color: var(--action-button-static-disabled-icon-color);
-        background-color: var(--action-button-static-disabled-bg-color);
+            .iconWrapper {
+                color: var(--action-button-static-disabled-icon-color);
+                background-color: var(--action-button-static-disabled-bg-color);
+            }
+        }
     }
 }
diff --git a/packages/action-button/tsconfig.build.json b/packages/action-button/tsconfig.build.json
index d90f28397c..1c107e5ddd 100644
--- a/packages/action-button/tsconfig.build.json
+++ b/packages/action-button/tsconfig.build.json
@@ -9,14 +9,14 @@
         "paths": {
             "@alfalab/core-components-action-button": ["./src"],
             "@alfalab/core-components-action-button/*": ["./src/*"],
+            "@alfalab/core-components-button": ["../button/src"],
+            "@alfalab/core-components-button/*": ["../button/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
-            "@alfalab/core-components-shared/*": ["../shared/src/*"],
-            "@alfalab/core-components-spinner": ["../spinner/src"],
-            "@alfalab/core-components-spinner/*": ["../spinner/src/*"]
+            "@alfalab/core-components-shared/*": ["../shared/src/*"]
         }
     },
     "references": [
-        { "path": "../shared/tsconfig.build.json" },
-        { "path": "../spinner/tsconfig.build.json" }
+        { "path": "../button/tsconfig.build.json" },
+        { "path": "../shared/tsconfig.build.json" }
     ]
 }
diff --git a/packages/action-button/tsconfig.json b/packages/action-button/tsconfig.json
index d35aee6188..e4ad5083c7 100644
--- a/packages/action-button/tsconfig.json
+++ b/packages/action-button/tsconfig.json
@@ -8,20 +8,20 @@
         "paths": {
             "@alfalab/core-components-action-button": ["./src"],
             "@alfalab/core-components-action-button/*": ["./src/*"],
+            "@alfalab/core-components-button": ["../button/src"],
+            "@alfalab/core-components-button/*": ["../button/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
             "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
             "@alfalab/core-components-shared/*": ["../shared/src/*"],
-            "@alfalab/core-components-spinner": ["../spinner/src"],
-            "@alfalab/core-components-spinner/*": ["../spinner/src/*"],
             "@alfalab/core-components-test-utils": ["../test-utils/src"],
             "@alfalab/core-components-test-utils/*": ["../test-utils/src/*"]
         }
     },
     "references": [
+        { "path": "../button/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
-        { "path": "../spinner/tsconfig.build.json" },
         { "path": "../test-utils/tsconfig.build.json" }
     ]
 }
diff --git a/packages/attach/src/__snapshots__/Component.test.tsx.snap b/packages/attach/src/__snapshots__/Component.test.tsx.snap
index e6274801c6..a5234bedee 100644
--- a/packages/attach/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/attach/src/__snapshots__/Component.test.tsx.snap
@@ -6,11 +6,11 @@ exports[`Attach Snapshots tests should match snapshot 1`] = `
     class="component size-48"
   >
     <button
-      class="component secondary size-48 hug size-48 component secondary component secondary withLeftAddons"
+      class="component component component component component size48 hug defaultPaddings defaultWidth minHeight secondary secondary secondary size48 component"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <svg
           class="icon"
diff --git a/packages/button/src/Component.responsive.tsx b/packages/button/src/Component.responsive.tsx
index 88b7744f36..aa8883e037 100644
--- a/packages/button/src/Component.responsive.tsx
+++ b/packages/button/src/Component.responsive.tsx
@@ -4,9 +4,9 @@ import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { ButtonDesktop } from './desktop';
 import { ButtonMobile } from './mobile';
-import { type ButtonProps } from './typings';
+import { type ButtonProps, type ButtonRef } from './typings';
 
-export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(
+export const Button = forwardRef<ButtonRef, ButtonProps>(
     (
         {
             children,
diff --git a/packages/button/src/Component.test.tsx b/packages/button/src/Component.test.tsx
index 8f2c19c39e..0cf36e5a4d 100644
--- a/packages/button/src/Component.test.tsx
+++ b/packages/button/src/Component.test.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, useState, FC, forwardRef } from 'react';
+import React, { MouseEvent, useState, FC, forwardRef, useRef } from 'react';
 import {
     render,
     fireEvent,
@@ -100,9 +100,9 @@ describe('Button', () => {
             expect(container.firstElementChild).toHaveAttribute('disabled');
         });
 
-        it('should set disabled attribute to <a>', () => {
+        it('should set `aria-disabled` attribute to <a>', () => {
             const { container } = render(<Button href='test' disabled={true} />);
-            expect(container.firstElementChild).toHaveAttribute('disabled');
+            expect(container.firstElementChild).toHaveAttribute('aria-disabled', 'true');
         });
     });
 
@@ -130,7 +130,7 @@ describe('Button', () => {
             const size = 56;
             const { container } = render(<Button size={size} />);
 
-            expect(container.firstElementChild).toHaveClass(`size-${size}`);
+            expect(container.firstElementChild).toHaveClass(`size${size}`);
         });
 
         it('should set `block` class', () => {
@@ -146,10 +146,10 @@ describe('Button', () => {
             expect(container.firstElementChild).toHaveClass(view);
         });
 
-        it('should set `iconOnly` class', () => {
+        it("shouldn't set `defaultWidth` class", () => {
             const { container } = render(<Button />);
 
-            expect(container.firstElementChild).toHaveClass('iconOnly');
+            expect(container.firstElementChild).not.toHaveClass('defaultWidth');
         });
 
         it('should set `nowrap` class', () => {
@@ -179,7 +179,7 @@ describe('Button', () => {
         it('should set `allowBackdropBlur` class', () => {
             const { container } = render(<Button allowBackdropBlur={true} />);
 
-            expect(container.firstElementChild).toHaveClass('allowBackdropBlur');
+            expect(container.firstElementChild).toHaveClass('blurred');
         });
     });
 
@@ -260,11 +260,12 @@ describe('Button', () => {
             );
 
             const button = getByTestId(dataTestId);
-            const getLoader = () => container.querySelector('svg');
+            const getLoader = () =>
+                container.querySelector(`[data-test-id=${getButtonTestIds(dataTestId).spinner}]`);
 
             const start = Date.now();
 
-            await fireEvent.click(button);
+            fireEvent.click(button);
 
             await waitFor(() => expect(getLoader()).toBeInTheDocument());
 
@@ -283,7 +284,8 @@ describe('Button', () => {
             );
 
             const button = getByTestId(dataTestId);
-            const getLoader = () => container.querySelector('svg');
+            const getLoader = () =>
+                container.querySelector(`[data-test-id=${getButtonTestIds(dataTestId).spinner}]`);
 
             const start = Date.now();
 
@@ -312,18 +314,21 @@ describe('Button', () => {
             expect(props['data-test-id']).toBe(dataTestId);
         });
 
-        it('should pass `to` instead `href` to custom component', () => {
-            const cb = jest.fn();
-            cb.mockReturnValue(null);
+        it('should pass `href` to custom component', () => {
+            expect.assertions(1);
 
-            render(<Button Component={forwardRef(cb)} href='test' />);
+            const CustomComponent = forwardRef<HTMLElement, { href?: string }>((props, _) => {
+                const firstRenderRef = useRef(true);
 
-            expect(cb).toHaveBeenCalled();
+                if (firstRenderRef.current) {
+                    firstRenderRef.current = false;
+                    expect(props).toEqual(expect.objectContaining({ href: 'test' }));
+                }
 
-            const props = cb.mock.calls[0][0];
+                return null;
+            });
 
-            expect(props.href).toBeFalsy();
-            expect(props.to).toBe('test');
+            render(<Button Component={CustomComponent} href='test' />);
         });
     });
 
diff --git a/packages/button/src/__image_snapshots__/button-mobile-view-sizes-sprite-3-snap.png b/packages/button/src/__image_snapshots__/button-mobile-view-sizes-sprite-3-snap.png
index 120aed2a76..868813a078 100644
--- a/packages/button/src/__image_snapshots__/button-mobile-view-sizes-sprite-3-snap.png
+++ b/packages/button/src/__image_snapshots__/button-mobile-view-sizes-sprite-3-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1d86ec62b61a66895afdec9571374acd154a8099f39a5672072ffddb6557b1f7
-size 22913
+oid sha256:f815f3c714d08c1ee0005e971b2caabdb0a64d034dfcf145811f914670444afa
+size 22955
diff --git a/packages/button/src/__image_snapshots__/button-screenshots-views-and-block-sprite-snap.png b/packages/button/src/__image_snapshots__/button-screenshots-views-and-block-sprite-snap.png
index d6b2f9826c..55f1370fc2 100644
--- a/packages/button/src/__image_snapshots__/button-screenshots-views-and-block-sprite-snap.png
+++ b/packages/button/src/__image_snapshots__/button-screenshots-views-and-block-sprite-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:980405db93a7e291e535773149d3c3f418c7692a04898a9b0e297479fcb45946
+oid sha256:8f7b3ae151bbacc39b34e0bde37c8eee9e8f33fe0129b1ffa62e9f9a921f41f8
 size 26684
diff --git a/packages/button/src/__image_snapshots__/button-view-sizes-sprite-3-snap.png b/packages/button/src/__image_snapshots__/button-view-sizes-sprite-3-snap.png
index 81549f0c35..184a5fbe86 100644
--- a/packages/button/src/__image_snapshots__/button-view-sizes-sprite-3-snap.png
+++ b/packages/button/src/__image_snapshots__/button-view-sizes-sprite-3-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e575ce0c2670a3dc60aa36792cfcc5b04ea8ec3ad516038771cba6c0043ee6a0
-size 22922
+oid sha256:d432774a99e65b477b6e4271bd2c42339ac78ca3bde71326ae65bcc4f78f5f4e
+size 23120
diff --git a/packages/button/src/__image_snapshots__/hover-button-screenshots-hover-state-view-4-colors-1-snap.png b/packages/button/src/__image_snapshots__/hover-button-screenshots-hover-state-view-4-colors-1-snap.png
index 1c8d70fdf2..12b71ba66e 100644
--- a/packages/button/src/__image_snapshots__/hover-button-screenshots-hover-state-view-4-colors-1-snap.png
+++ b/packages/button/src/__image_snapshots__/hover-button-screenshots-hover-state-view-4-colors-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bc9111fdd9c12a12ea30f78d36368ad38908d9d23aece400e132f0e56a247314
+oid sha256:00a747d2ca295d28fd501b627767c13e4252f728e84d991c554f3158b18d5222
 size 1769
diff --git a/packages/button/src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-0-snap.png b/packages/button/src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-0-snap.png
index fbc7e0428b..202fdad848 100644
--- a/packages/button/src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-0-snap.png
+++ b/packages/button/src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:760bb5e69a7dcc71df0050877dedd7e788ea2151114ba5ccc310a2667bb97cd9
-size 1766
+oid sha256:38cd03ffb7571f2e3cff31ce79c1b788896b0f0a039a61d06e28d7f818d2be03
+size 1783
diff --git a/packages/button/src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-1-snap.png b/packages/button/src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-1-snap.png
index 352c83537b..170df42efb 100644
--- a/packages/button/src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-1-snap.png
+++ b/packages/button/src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c99909b3fd3b6f2dd68205f7bc5773c7fa1987421568de6424da72fc659fb000
-size 1740
+oid sha256:496ac563f9917590ec96b404bdb054c1c51438423461fc52b41e4913ad15a02e
+size 1788
diff --git a/packages/button/src/__snapshots__/Component.test.tsx.snap b/packages/button/src/__snapshots__/Component.test.tsx.snap
index f2ca6b722f..36e9361b7a 100644
--- a/packages/button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/button/src/__snapshots__/Component.test.tsx.snap
@@ -6,14 +6,14 @@ exports[`Button Snapshots tests should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
       type="button"
     />
   </div>,
@@ -77,14 +77,16 @@ exports[`Button Snapshots tests should render anchor if href pass 1`] = `
   "baseElement": <body>
     <div>
       <a
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        aria-disabled="false"
+        class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
         href="https://some-url"
       />
     </div>
   </body>,
   "container": <div>
     <a
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      aria-disabled="false"
+      class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
       href="https://some-url"
     />
   </div>,
@@ -148,14 +150,14 @@ exports[`Button Snapshots tests should render button by default 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
       type="button"
     />
   </div>,
@@ -219,11 +221,11 @@ exports[`Button Snapshots tests should render left addons 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <div>
             Left addons
@@ -234,11 +236,11 @@ exports[`Button Snapshots tests should render left addons 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <div>
           Left addons
@@ -306,12 +308,11 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
   "baseElement": <body>
     <div>
       <a
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
-        disabled=""
-        href="https://some-url"
+        aria-disabled="true"
+        class="component disabled disabled disabled disabled disabled component loading component loading component loading component loading size56 hug minWidth minHeight secondary secondary secondary size56 component"
       >
         <svg
-          class="spinner component preset24 loader loader loader visible"
+          class="spinner component preset24 component loader loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -351,12 +352,11 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
   </body>,
   "container": <div>
     <a
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
-      disabled=""
-      href="https://some-url"
+      aria-disabled="true"
+      class="component disabled disabled disabled disabled disabled component loading component loading component loading component loading size56 hug minWidth minHeight secondary secondary secondary size56 component"
     >
       <svg
-        class="spinner component preset24 loader loader loader visible"
+        class="spinner component preset24 component loader loader loader loader visible"
         style="height: 20px; width: 20px;"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -453,12 +453,12 @@ exports[`Button Snapshots tests should render loader if loading pass 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
+        class="component component loading component loading component loading component loading size56 hug minWidth minHeight secondary secondary secondary size56 component"
         disabled=""
         type="button"
       >
         <svg
-          class="spinner component preset24 loader loader loader visible"
+          class="spinner component preset24 component loader loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -498,12 +498,12 @@ exports[`Button Snapshots tests should render loader if loading pass 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
+      class="component component loading component loading component loading component loading size56 hug minWidth minHeight secondary secondary secondary size56 component"
       disabled=""
       type="button"
     >
       <svg
-        class="spinner component preset24 loader loader loader visible"
+        class="spinner component preset24 component loader loader loader loader visible"
         style="height: 20px; width: 20px;"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -600,11 +600,11 @@ exports[`Button Snapshots tests should render right addons 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <div>
             Right addons
@@ -615,11 +615,11 @@ exports[`Button Snapshots tests should render right addons 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      class="component component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <div>
           Right addons
diff --git a/packages/button/src/components/base-button-candidate/Component.tsx b/packages/button/src/components/base-button-candidate/Component.tsx
new file mode 100644
index 0000000000..02df2062dc
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/Component.tsx
@@ -0,0 +1,79 @@
+import React, { type FC, forwardRef, type MouseEventHandler, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import { useFocus } from '@alfalab/hooks';
+
+import { ButtonComponent } from '../button-component';
+
+import { type BaseButtonCandidateProps, type BaseButtonContentProps } from './types';
+
+import styles from './index.module.css';
+
+const DefaultContent: FC<BaseButtonContentProps> = ({ children }) => children;
+
+export const BaseButtonCandidate = forwardRef<HTMLElement, BaseButtonCandidateProps>(
+    (
+        {
+            children,
+            block,
+            className,
+            loaderClassName,
+            disabledClassName,
+            dataTestId,
+            loading,
+            Component = ButtonComponent,
+            disabled: disabledFromProps,
+            type,
+            onClick,
+            href,
+            Content = DefaultContent,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const buttonRef = useRef<HTMLElement>(null);
+        const [focused] = useFocus(buttonRef, 'keyboard');
+        const disabled = disabledFromProps || loading;
+        const passDisabledClassName = disabled && typeof href === 'string';
+
+        const handleClick: MouseEventHandler<HTMLElement> = (event) => {
+            if (disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+            } else {
+                onClick?.(event);
+            }
+        };
+
+        return (
+            <Component
+                data-test-id={dataTestId}
+                {...restProps}
+                href={href}
+                className={cn(
+                    styles.component,
+                    {
+                        [styles.focused]: focused,
+                        [styles.block]: block,
+                    },
+                    passDisabledClassName && [styles.disabled, disabledClassName],
+                    className,
+                )}
+                // @ts-expect-error anchor's type and button's type are not compatible
+                type={type}
+                disabled={disabled}
+                onClick={handleClick}
+                ref={mergeRefs([buttonRef, ref])}
+            >
+                <Content
+                    dataTestId={dataTestId}
+                    loading={loading}
+                    loaderClassName={loaderClassName}
+                >
+                    {children}
+                </Content>
+            </Component>
+        );
+    },
+);
diff --git a/packages/button/src/components/base-button-candidate/index.module.css b/packages/button/src/components/base-button-candidate/index.module.css
new file mode 100644
index 0000000000..f4841f84a7
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/index.module.css
@@ -0,0 +1,32 @@
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
+
+.component {
+    @mixin reset-tap-highlight-color;
+
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+
+    /* Block */
+
+    &.block {
+        display: flex;
+        width: 100%;
+    }
+
+    /* Focus */
+
+    &.focused {
+        @mixin focus-outline;
+    }
+
+    /* Disabled */
+
+    @mixin disabled {
+        cursor: var(--disabled-cursor);
+
+        & * {
+            pointer-events: none;
+        }
+    }
+}
diff --git a/packages/button/src/components/base-button-candidate/index.ts b/packages/button/src/components/base-button-candidate/index.ts
new file mode 100644
index 0000000000..6620b588d7
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/index.ts
@@ -0,0 +1,2 @@
+export { BaseButtonCandidate } from './Component';
+export * from './types';
diff --git a/packages/button/src/components/base-button-candidate/types.ts b/packages/button/src/components/base-button-candidate/types.ts
new file mode 100644
index 0000000000..835123e83d
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/types.ts
@@ -0,0 +1,96 @@
+import {
+    type AnchorHTMLAttributes,
+    type ButtonHTMLAttributes,
+    type ComponentType,
+    type ForwardRefExoticComponent,
+    type ReactNode,
+    type RefAttributes,
+} from 'react';
+
+export interface DisableAttributes {
+    /**
+     * Заблокировать кнопку
+     */
+    disabled?: boolean;
+}
+
+export interface MaybeAnchorAttributes<T extends string | undefined> {
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: T;
+}
+
+export interface BaseButtonContentProps {
+    dataTestId?: string;
+    loaderClassName?: string;
+    loading?: boolean;
+    children?: ReactNode;
+}
+
+export type ButtonComponentProps = DisableAttributes &
+    (AnchorHTMLAttributes<HTMLElement> | ButtonHTMLAttributes<HTMLElement>);
+
+export interface BaseButtonOwnProps extends DisableAttributes {
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Дополнительный класс для лоадера
+     */
+    loaderClassName?: string;
+
+    /**
+     * Дополнительный класc при отключении кнопки
+     */
+    disabledClassName?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     * Для лоадера используется постфикс `${dataTestId}-loader`
+     */
+    dataTestId?: string;
+
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+
+    /**
+     * Кастомный компонент для кнопки
+     */
+    Component?:
+        | ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>
+        | ComponentType<ButtonHTMLAttributes<HTMLButtonElement>>
+        | ComponentType<ButtonComponentProps>
+        | ForwardRefExoticComponent<
+              AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement>
+          >
+        | ForwardRefExoticComponent<
+              ButtonHTMLAttributes<HTMLButtonElement> & RefAttributes<HTMLButtonElement>
+          >
+        | ForwardRefExoticComponent<ButtonComponentProps & RefAttributes<HTMLElement>>;
+
+    Content?: ComponentType<BaseButtonContentProps>;
+}
+
+type AnchorLikeProps<T> = MaybeAnchorAttributes<string> &
+    T &
+    Omit<AnchorHTMLAttributes<HTMLElement>, keyof T>;
+
+type ButtonLikeProps<T> = MaybeAnchorAttributes<undefined> &
+    T &
+    Omit<ButtonHTMLAttributes<HTMLElement>, keyof T>;
+
+export type ButtonPropsFactory<T> = AnchorLikeProps<T> | ButtonLikeProps<T>;
+
+export type BaseButtonCandidateProps = ButtonPropsFactory<BaseButtonOwnProps>;
diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index 7aaffb248f..d71e1cf522 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -1,21 +1,11 @@
-/* eslint-disable complexity */
-import React, {
-    type AnchorHTMLAttributes,
-    type ButtonHTMLAttributes,
-    forwardRef,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
-import mergeRefs from 'react-merge-refs';
+import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-import { getDataTestId } from '@alfalab/core-components-shared';
-import { Spinner } from '@alfalab/core-components-spinner';
-import { useFocus } from '@alfalab/hooks';
-
-import { LOADER_MIN_DISPLAY_INTERVAL } from '../../constants/loader-min-display-interval';
-import { type CommonButtonProps, type PrivateButtonProps } from '../../typings';
+import { BUTTON_DEFAULT_SHAPE, BUTTON_DEFAULT_SIZE } from '../../constants/const';
+import { useLoading } from '../../shared';
+import { type ButtonRef, type CommonButtonProps, type PrivateButtonProps } from '../../typings';
+import { ButtonComponent } from '../button-component';
+import { ButtonLayout } from '../button-layout';
 
 import defaultColors from './default.module.css';
 import commonStyles from './index.module.css';
@@ -26,193 +16,49 @@ const colorStyles = {
     inverted: invertedColors,
 };
 
-export const BaseButton = forwardRef<
-    HTMLAnchorElement | HTMLButtonElement,
-    CommonButtonProps & PrivateButtonProps
->(
+export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButtonProps>(
     (
         {
             allowBackdropBlur,
-            children,
             view = 'secondary',
-            shape = 'rectangular',
-            textResizing = 'hug',
-            hint,
-            leftAddons,
-            rightAddons,
-            size = 56,
-            block = false,
-            className,
+            className: classNameFromProps,
             spinnerClassName,
-            dataTestId,
-            href,
-            loading = false,
-            nowrap = false,
+            loaderClassName = spinnerClassName,
+            loading: loadingFromProps,
             colors = 'default',
-            Component = href ? 'a' : 'button',
-            onClick,
-            styles = {},
-            colorStylesMap = { default: {}, inverted: {} },
+            Component = ButtonComponent,
+            styles: stylesFromProps = {},
+            colorStylesMap,
             ...restProps
         },
         ref,
     ) => {
-        const buttonRef = useRef<HTMLElement>(null);
-
-        const [focused] = useFocus(buttonRef, 'keyboard');
-
-        const [loaderTimePassed, setLoaderTimePassed] = useState(true);
-
-        const timerId = useRef(0);
-
-        const showLoader = loading || !loaderTimePassed;
-
-        const showHint = hint && [56, 64, 72].includes(size);
-
-        const iconOnly = !children;
-
-        const sizeStyle = `size-${size}`;
-
-        const componentProps = {
-            className: cn(
-                commonStyles.component,
-                commonStyles[view],
-                commonStyles[sizeStyle],
-                commonStyles[textResizing],
-                shape === 'rectangular' && styles[sizeStyle],
-                shape === 'rounded' && commonStyles[shape],
-                colorStyles[colors].component,
-                colorStyles[colors][view],
-                colorStylesMap[colors].component,
-                {
-                    [commonStyles.allowBackdropBlur]: allowBackdropBlur,
-                    [colorStylesMap[colors][view]]: Boolean(colorStylesMap[colors][view]),
-                    [commonStyles.focused]: focused,
-                    [commonStyles.block]: block,
-                    [commonStyles.iconOnly]: iconOnly,
-                    [commonStyles.loading]: showLoader,
-                    [commonStyles.withRightAddons]: Boolean(rightAddons) && !iconOnly,
-                    [commonStyles.withLeftAddons]: Boolean(leftAddons) && !iconOnly,
-                    [colorStyles[colors].loading]: showLoader,
-                    [colorStylesMap[colors].loading]: showLoader,
-                },
-                className,
-            ),
-            'data-test-id': dataTestId || null,
-        };
-
-        const {
-            disabled,
-            type = 'button',
-            ...restButtonProps
-        } = restProps as ButtonHTMLAttributes<HTMLButtonElement>;
-
-        const buttonChildren = (
-            <React.Fragment>
-                {leftAddons && <span className={commonStyles.addons}>{leftAddons}</span>}
-                {children && (
-                    <span
-                        className={cn(commonStyles.label, {
-                            [commonStyles.nowrap]: nowrap,
-                            [commonStyles.stretchText]:
-                                !(leftAddons || rightAddons) || textResizing === 'fill',
-                        })}
-                    >
-                        {children}
-                        {showHint && (
-                            <span
-                                className={cn(
-                                    commonStyles.hint,
-                                    colorStylesMap[colors].hint,
-                                    colorStyles[colors].hint,
-                                )}
-                            >
-                                {hint}
-                            </span>
-                        )}
-                    </span>
-                )}
-
-                {showLoader && (
-                    <Spinner
-                        preset={24}
-                        dataTestId={getDataTestId(dataTestId, 'loader')}
-                        visible={true}
-                        className={cn(
-                            commonStyles.loader,
-                            colorStyles[colors].loader,
-                            colorStylesMap[colors].loader,
-                            spinnerClassName,
-                        )}
-                    />
-                )}
-
-                {rightAddons && <span className={commonStyles.addons}>{rightAddons}</span>}
-            </React.Fragment>
-        );
-
-        useEffect(() => {
-            if (loading) {
-                setLoaderTimePassed(false);
-
-                timerId.current = window.setTimeout(() => {
-                    setLoaderTimePassed(true);
-                }, LOADER_MIN_DISPLAY_INTERVAL);
-            }
-        }, [loading]);
-
-        useEffect(
-            () => () => {
-                window.clearTimeout(timerId.current);
+        const loading = useLoading(loadingFromProps);
+        const { size = BUTTON_DEFAULT_SIZE, shape = BUTTON_DEFAULT_SHAPE, disabled } = restProps;
+        const styles = [stylesFromProps, colorStyles[colors], colorStylesMap[colors]];
+        const blurred =
+            allowBackdropBlur &&
+            (view === 'secondary' || (disabled && (view === 'accent' || view === 'primary')));
+        const className = cn(
+            styles.map((s) => s[view]),
+            {
+                [stylesFromProps[`size${size}`]]: shape === 'rectangular',
+                [commonStyles.blurred]: blurred,
             },
-            [],
+            classNameFromProps,
         );
 
-        const handleClick = (
-            e: React.MouseEvent<HTMLAnchorElement, MouseEvent> &
-                React.MouseEvent<HTMLButtonElement, MouseEvent>,
-        ) => {
-            if (disabled || showLoader) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                return;
-            }
-            onClick?.(e);
-        };
-
-        if (href) {
-            const { target } = restProps as AnchorHTMLAttributes<HTMLAnchorElement>;
-
-            // Для совместимости с react-router-dom, меняем href на to
-            const hrefProps = { [typeof Component === 'string' ? 'href' : 'to']: href };
-
-            return (
-                <Component
-                    rel={target === '_blank' ? 'noreferrer noopener' : undefined}
-                    {...componentProps}
-                    {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
-                    {...hrefProps}
-                    onClick={handleClick}
-                    disabled={disabled || showLoader}
-                    ref={mergeRefs([buttonRef, ref])}
-                >
-                    {buttonChildren}
-                </Component>
-            );
-        }
-
         return (
-            <Component
-                {...componentProps}
-                {...restButtonProps}
-                onClick={handleClick}
-                type={type}
-                disabled={disabled || showLoader}
-                ref={mergeRefs([buttonRef, ref])}
-            >
-                {buttonChildren}
-            </Component>
+            <ButtonLayout
+                {...restProps}
+                ref={ref}
+                layout={view === 'text' ? 'text' : 'button'}
+                className={className}
+                Component={Component}
+                loading={loading}
+                loaderClassName={loaderClassName}
+                styles={styles}
+            />
         );
     },
 );
diff --git a/packages/button/src/components/base-button/default.module.css b/packages/button/src/components/base-button/default.module.css
index 58a03d5256..8f4829f3a3 100644
--- a/packages/button/src/components/base-button/default.module.css
+++ b/packages/button/src/components/base-button/default.module.css
@@ -1,153 +1,137 @@
 @import '../../vars.css';
 
-.accent {
-    color: var(--button-accent-color);
-    background-color: var(--button-accent-base-bg-color);
-    border: 1px solid transparent;
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-accent-hover-bg-color);
+.component {
+    &.accent {
+        color: var(--button-accent-color);
+        background-color: var(--button-accent-base-bg-color);
+        border: var(--button-border-width) solid transparent;
+
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-accent-hover-bg-color);
+            }
+
+            &:active {
+                background-color: var(--button-accent-active-bg-color);
+            }
         }
-    }
-
-    &:active {
-        background-color: var(--button-accent-active-bg-color);
-    }
-
-    & > .loader {
-        color: var(--button-spinner-static-color);
-    }
-}
 
-.primary {
-    border: 1px solid transparent;
-}
-
-.secondary {
-    color: var(--button-secondary-color);
-    border: 1px solid var(--button-secondary-base-border-color);
-
-    & > .loader {
-        color: var(--button-spinner-default-color);
+        & .loader {
+            color: var(--button-spinner-static-color);
+        }
     }
 
-    &:not([disabled]) .hint {
-        color: var(--button-secondary-hint-color);
-    }
-}
+    &.primary {
+        border: var(--button-border-width) solid transparent;
 
-.outlined {
-    color: var(--button-outlined-color);
-    background-color: var(--button-outlined-base-bg-color);
-    border: 1px solid var(--button-outlined-base-border-color);
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-outlined-hover-bg-color);
-            border-color: var(--button-outlined-hover-border-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-primary-hint-color);
+            }
         }
     }
 
-    &:active {
-        background-color: var(--button-outlined-active-bg-color);
-    }
+    &.secondary {
+        color: var(--button-secondary-color);
+        border: var(--button-border-width) solid var(--button-secondary-base-border-color);
 
-    & > .loader {
-        color: var(--button-spinner-default-color);
-    }
+        & .loader {
+            color: var(--button-spinner-default-color);
+        }
 
-    &:not([disabled]) .hint {
-        color: var(--button-outlined-hint-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-secondary-hint-color);
+            }
+        }
     }
-}
-
-.transparent {
-    color: var(--button-transparent-base-color);
-    background-color: transparent;
-    border: 1px solid transparent;
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-transparent-hover-bg-color);
+    &.outlined {
+        color: var(--button-outlined-color);
+        background-color: var(--button-outlined-base-bg-color);
+        border: var(--button-border-width) solid var(--button-outlined-base-border-color);
+
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-outlined-hover-bg-color);
+                border-color: var(--button-outlined-hover-border-color);
+            }
+
+            .hint {
+                color: var(--button-outlined-hint-color);
+            }
+
+            &:active {
+                background-color: var(--button-outlined-active-bg-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-transparent-active-bg-color);
+        & .loader {
+            color: var(--button-spinner-default-color);
+        }
     }
 
-    & > .loader {
-        color: var(--button-spinner-default-color);
-    }
+    &.transparent {
+        color: var(--button-transparent-base-color);
+        background-color: transparent;
+        border: var(--button-border-width) solid transparent;
 
-    &:not([disabled]) .hint {
-        color: var(--button-transparent-base-hint-color);
-    }
-}
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-transparent-hover-bg-color);
+            }
 
-.text {
-    background-color: transparent;
-    color: var(--button-text-base-color);
+            .hint {
+                color: var(--button-transparent-base-hint-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            color: var(--button-text-hover-color);
+            &:active {
+                background-color: var(--button-transparent-active-bg-color);
+            }
         }
-    }
-
-    & > .loader {
-        color: var(--button-spinner-default-color);
-    }
 
-    &:not([disabled]) .hint {
-        color: var(--button-text-base-hint-color);
+        & .loader {
+            color: var(--button-spinner-default-color);
+        }
     }
-}
 
-/* Disabled */
+    &.text {
+        background-color: transparent;
+        color: var(--button-text-base-color);
 
-.component[disabled] {
-    &.accent {
-        color: var(--button-accent-disabled-color);
-        background-color: var(--button-accent-disabled-bg-color);
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--button-text-hover-color);
+            }
 
-        &.loading {
-            color: var(--button-accent-color);
-            background-color: var(--button-accent-base-bg-color);
+            .hint {
+                color: var(--button-text-base-hint-color);
+            }
         }
-    }
-
-    &.secondary {
-        border-color: var(--button-secondary-disabled-border-color);
 
-        &.loading {
-            color: var(--button-secondary-color);
-            background-color: var(--button-secondary-base-bg-color);
-            border-color: var(--button-secondary-base-border-color);
+        & .loader {
+            color: var(--button-spinner-default-color);
         }
     }
 
-    &.outlined {
-        background-color: var(--button-outlined-disabled-bg-color);
-
-        &.loading {
-            color: var(--button-outlined-color);
-            border-color: var(--button-outlined-base-border-color);
-        }
-    }
+    @mixin disabled {
+        &:not(.loading) {
+            &.accent {
+                color: var(--button-accent-disabled-color);
+                background-color: var(--button-accent-disabled-bg-color);
+            }
 
-    &.transparent {
-        background-color: transparent;
+            &.secondary {
+                border-color: var(--button-secondary-disabled-border-color);
+            }
 
-        &.loading {
-            color: var(--button-transparent-base-color);
-        }
-    }
+            &.outlined {
+                background-color: var(--button-outlined-disabled-bg-color);
+            }
 
-    &.text {
-        &.loading {
-            color: var(--button-text-base-color);
+            &.transparent {
+                background-color: transparent;
+            }
         }
     }
 }
diff --git a/packages/button/src/components/base-button/index.module.css b/packages/button/src/components/base-button/index.module.css
index e978ccbecd..36b801f678 100644
--- a/packages/button/src/components/base-button/index.module.css
+++ b/packages/button/src/components/base-button/index.module.css
@@ -1,311 +1,6 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '../../vars.css';
 
-.component {
-    @mixin reset-tap-highlight-color;
-
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: center;
-    align-items: center;
-    margin: var(--gap-0);
-    padding: var(--gap-0) 23px;
-    text-decoration: none;
-    outline: none;
-    box-shadow: none;
-    user-select: none;
-    cursor: pointer;
-    transition:
-        background 0.2s ease,
-        border 0.2s ease,
-        color 0.2s ease;
-    box-sizing: border-box;
-}
-
-.hug {
-    justify-content: center;
-    text-align: center;
-}
-
-.fill {
-    text-align: left;
-}
-
-.hint {
-    @mixin paragraph_primary_small;
-
-    display: block;
-}
-
-.allowBackdropBlur {
-    &.secondary,
-    &.accent[disabled],
-    &.primary[disabled] {
-        backdrop-filter: blur(80px);
-    }
-}
-
-.focused {
-    @mixin focus-outline;
-}
-
-.loading .label,
-.loading .addons {
-    opacity: 0;
-}
-
-.stretchText {
-    flex-grow: 1;
-}
-
-.loader {
-    position: absolute;
-    left: var(--gap-0);
-    right: var(--gap-0);
-    margin: var(--gap-0) auto;
-}
-
-/* Size */
-
-/* За счет того, что у кнопок есть border 1px,
-для полного соответствия макетам padding необходимо уменьшить на 1px (16px -> 15px) */
-.size-32 {
-    min-width: 80px;
-    min-height: var(--size-xxs-height);
-    padding: var(--gap-0) 15px;
-
-    @mixin action_primary_small;
-
-    &.iconOnly {
-        min-width: var(--size-xxs-height);
-    }
-}
-
-.size-40 {
-    min-width: 88px;
-    min-height: var(--size-xs-height);
-    padding: var(--gap-0) 19px;
-
-    @mixin action_primary_small;
-
-    &.iconOnly {
-        min-width: var(--size-xs-height);
-    }
-}
-
-.size-48 {
-    min-width: 104px;
-    min-height: var(--size-s-height);
-
-    @mixin action_component_primary;
-
-    line-height: 20px;
-
-    &.iconOnly {
-        min-width: var(--size-s-height);
-    }
-}
-
-.size-56 {
-    min-width: 128px;
-    min-height: var(--size-m-height);
-    padding: var(--gap-0) 27px;
-
-    @mixin action_component_primary;
-
-    &.iconOnly {
-        min-width: var(--size-m-height);
-    }
-}
-
-.size-64 {
-    min-width: 160px;
-    min-height: var(--size-l-height);
-    padding: var(--gap-0) 31px;
-
-    @mixin action_primary_large;
-
-    &.iconOnly {
-        min-width: var(--size-l-height);
-    }
-}
-
-.size-72 {
-    min-width: 168px;
-    min-height: var(--size-xl-height);
-    padding: var(--gap-0) 35px;
-
-    @mixin action_primary_large;
-
-    &.iconOnly {
-        min-width: var(--size-xl-height);
-    }
-}
-
-.withRightAddons {
-    &.size-32 {
-        padding-right: 11px;
-    }
-
-    &.size-40 {
-        padding-right: 15px;
-    }
-
-    &.size-48 {
-        padding-right: 19px;
-    }
-
-    &.size-56 {
-        padding-right: 23px;
-    }
-
-    &.size-64 {
-        padding-right: 27px;
-    }
-
-    &.size-72 {
-        padding-right: 31px;
-    }
-
-    &.text {
-        padding-right: var(--gap-0);
-    }
-}
-
-.withLeftAddons {
-    &.size-32 {
-        padding-left: 11px;
-    }
-
-    &.size-40 {
-        padding-left: 15px;
-    }
-
-    &.size-48 {
-        padding-left: 19px;
-    }
-
-    &.size-56 {
-        padding-left: 23px;
-    }
-
-    &.size-64 {
-        padding-left: 27px;
-    }
-
-    &.size-72 {
-        padding-left: 31px;
-    }
-
-    &.text {
-        padding-left: var(--gap-0);
-    }
-}
-
-.transparent {
-    min-width: 0;
-}
-
-.text.text {
-    min-width: 0;
-    min-height: 0;
-    padding: var(--gap-0);
-    border: none;
-    appearance: none;
-
-    &.iconOnly {
-        min-width: 0;
-    }
-
-    &.size-48,
-    &.size-56 {
-        min-height: 24px;
-    }
-}
-
-/* Disabled */
-
-.component[disabled] {
-    cursor: var(--disabled-cursor);
-
-    & * {
-        pointer-events: none;
-    }
-}
-
-/* Addons */
-
-.addons {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    margin: var(--gap-0);
-
-    &:first-child {
-        margin-right: var(--gap-6);
-    }
-
-    &:last-child {
-        margin-left: var(--gap-6);
-    }
-
-    &:only-child {
-        margin: var(--gap-0);
-    }
-}
-
-.size-48,
-.size-56 {
-    & .addons:first-child {
-        margin-right: var(--gap-8);
-    }
-
-    & .addons:last-child {
-        margin-left: var(--gap-8);
-    }
-
-    & .addons:only-child {
-        margin: var(--gap-0);
-    }
-}
-
-.size-64,
-.size-72 {
-    & .addons:first-child {
-        margin-right: var(--gap-12);
-    }
-
-    & .addons:last-child {
-        margin-left: var(--gap-12);
-    }
-
-    & .addons:only-child {
-        margin: var(--gap-0);
-    }
-}
-
-.iconOnly {
-    padding: var(--gap-0);
-}
-
-/* Block */
-
-.block {
-    display: flex;
-    width: 100%;
-}
-
-/* Nowrap */
-
-.nowrap {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.rounded {
-    border-radius: var(--border-radius-pill);
+.blurred {
+    backdrop-filter: blur(80px);
 }
diff --git a/packages/button/src/components/base-button/inverted.module.css b/packages/button/src/components/base-button/inverted.module.css
index bcac78abd1..23b2142411 100644
--- a/packages/button/src/components/base-button/inverted.module.css
+++ b/packages/button/src/components/base-button/inverted.module.css
@@ -1,150 +1,137 @@
 @import '../../vars.css';
 
-.accent {
-    color: var(--button-inverted-accent-color);
-    background-color: var(--button-inverted-accent-base-bg-color);
-    border: 1px solid transparent;
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-accent-hover-bg-color);
+.component {
+    &.accent {
+        color: var(--button-inverted-accent-color);
+        background-color: var(--button-inverted-accent-base-bg-color);
+        border: var(--button-border-width) solid transparent;
+
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-accent-hover-bg-color);
+            }
+
+            &:active {
+                background-color: var(--button-inverted-accent-active-bg-color);
+            }
         }
-    }
-
-    &:active {
-        background-color: var(--button-inverted-accent-active-bg-color);
-    }
-
-    & > .loader {
-        color: var(--button-spinner-inverted-static-color);
-    }
-}
-
-.primary {
-    border: 1px solid transparent;
-}
-
-.secondary {
-    color: var(--button-inverted-secondary-color);
-    border: 1px solid var(--button-inverted-secondary-base-border-color);
-
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
 
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-secondary-hint-color);
+        & .loader {
+            color: var(--button-spinner-inverted-static-color);
+        }
     }
-}
 
-.outlined {
-    color: var(--button-inverted-outlined-color);
-    background-color: var(--button-inverted-outlined-base-bg-color);
-    border: 1px solid var(--button-inverted-outlined-base-border-color);
+    &.primary {
+        border: var(--button-border-width) solid transparent;
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-outlined-hover-bg-color);
-            border-color: var(--button-inverted-outlined-hover-border-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-inverted-primary-hint-color);
+            }
         }
     }
 
-    &:active {
-        background-color: var(--button-inverted-outlined-active-bg-color);
-    }
+    &.secondary {
+        color: var(--button-inverted-secondary-color);
+        border: var(--button-border-width) solid var(--button-inverted-secondary-base-border-color);
 
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
+        & .loader {
+            color: var(--button-spinner-inverted-color);
+        }
 
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-outlined-hint-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-inverted-secondary-hint-color);
+            }
+        }
     }
-}
-
-.transparent {
-    color: var(--button-inverted-transparent-base-color);
-    background-color: transparent;
-    border: 1px solid transparent;
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-transparent-hover-bg-color);
+    &.outlined {
+        color: var(--button-inverted-outlined-color);
+        background-color: var(--button-inverted-outlined-base-bg-color);
+        border: var(--button-border-width) solid var(--button-inverted-outlined-base-border-color);
+
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-outlined-hover-bg-color);
+                border-color: var(--button-inverted-outlined-hover-border-color);
+            }
+
+            &:active {
+                background-color: var(--button-inverted-outlined-active-bg-color);
+            }
+
+            .hint {
+                color: var(--button-inverted-outlined-hint-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-inverted-transparent-active-bg-color);
+        & .loader {
+            color: var(--button-spinner-inverted-color);
+        }
     }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
+    &.transparent {
+        color: var(--button-inverted-transparent-base-color);
+        background-color: transparent;
+        border: var(--button-border-width) solid transparent;
 
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-transparent-base-hint-color);
-    }
-}
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-transparent-hover-bg-color);
+            }
 
-.text {
-    background-color: transparent;
-    color: var(--button-inverted-text-base-color);
+            &:active {
+                background-color: var(--button-inverted-transparent-active-bg-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            color: var(--button-inverted-text-hover-color);
+            .hint {
+                color: var(--button-inverted-transparent-base-hint-color);
+            }
         }
-    }
-
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
-
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-text-base-hint-color);
-    }
-}
-
-.component[disabled] {
-    &.accent {
-        color: var(--button-inverted-accent-disabled-color);
-        background-color: var(--button-inverted-accent-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-inverted-accent-color);
-            background-color: var(--button-inverted-accent-base-bg-color);
+        & .loader {
+            color: var(--button-spinner-inverted-color);
         }
     }
 
-    &.secondary {
-        border-color: var(--button-inverted-secondary-disabled-border-color);
+    &.text {
+        background-color: transparent;
+        color: var(--button-inverted-text-base-color);
 
-        &.loading {
-            color: var(--button-inverted-secondary-color);
-            background-color: var(--button-inverted-secondary-base-bg-color);
-            border-color: var(--button-inverted-secondary-base-border-color);
+        & .loader {
+            color: var(--button-spinner-inverted-color);
         }
-    }
 
-    &.outlined {
-        background-color: var(--button-inverted-outlined-disabled-bg-color);
+        @mixin not-disabled {
+            &:hover {
+                color: var(--button-inverted-text-hover-color);
+            }
 
-        &.loading {
-            color: var(--button-inverted-outlined-color);
+            .hint {
+                color: var(--button-inverted-text-base-hint-color);
+            }
         }
     }
 
-    &.transparent {
-        background-color: transparent;
+    @mixin disabled {
+        &:not(.loading) {
+            &.accent {
+                color: var(--button-inverted-accent-disabled-color);
+                background-color: var(--button-inverted-accent-disabled-bg-color);
+            }
 
-        &.loading {
-            color: var(--button-inverted-transparent-base-color);
-        }
-    }
+            &.secondary {
+                border-color: var(--button-inverted-secondary-disabled-border-color);
+            }
 
-    &.text {
-        &.loading {
-            color: var(--button-inverted-text-base-color);
+            &.outlined {
+                background-color: var(--button-inverted-outlined-disabled-bg-color);
+            }
+
+            &.transparent {
+                background-color: transparent;
+            }
         }
     }
 }
diff --git a/packages/button/src/components/button-component/Component.tsx b/packages/button/src/components/button-component/Component.tsx
new file mode 100644
index 0000000000..fdc42b46b5
--- /dev/null
+++ b/packages/button/src/components/button-component/Component.tsx
@@ -0,0 +1,54 @@
+import React, { type AnchorHTMLAttributes, forwardRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import { hasOwnProperty } from '@alfalab/core-components-shared';
+
+import { type ButtonComponentProps } from '../base-button-candidate';
+
+import styles from './index.module.css';
+
+function isAnchorProps(props: ButtonComponentProps): props is AnchorHTMLAttributes<HTMLElement> {
+    return hasOwnProperty(props, 'href') && typeof props.href === 'string';
+}
+
+export const ButtonComponent = forwardRef<HTMLElement, ButtonComponentProps>(
+    (props, forwardedRef) => {
+        const cls = cn(props.className, styles.component);
+        const ref = mergeRefs([forwardedRef]);
+
+        if (isAnchorProps(props)) {
+            const {
+                href,
+                disabled,
+                target,
+                rel = target === '_blank' ? 'noreferrer noopener' : undefined,
+                ...restProps
+            } = props;
+
+            return (
+                // children are in restProps
+                // eslint-disable-next-line jsx-a11y/anchor-has-content
+                <a
+                    {...restProps}
+                    ref={ref}
+                    className={cls}
+                    target={target}
+                    rel={rel}
+                    href={disabled ? undefined : href}
+                    aria-disabled={disabled}
+                />
+            );
+        }
+
+        return (
+            <button
+                {...props}
+                ref={ref}
+                className={cls}
+                // eslint-disable-next-line react/button-has-type
+                type={props.type ?? 'button'}
+            />
+        );
+    },
+);
diff --git a/packages/button/src/components/button-component/index.module.css b/packages/button/src/components/button-component/index.module.css
new file mode 100644
index 0000000000..ad3d21c976
--- /dev/null
+++ b/packages/button/src/components/button-component/index.module.css
@@ -0,0 +1,17 @@
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
+@import '../../vars.css';
+
+.component {
+    margin: unset;
+    padding: unset;
+    text-decoration: none;
+    outline: none;
+    box-shadow: none;
+    user-select: none;
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    box-sizing: border-box; /* same as button's default */
+}
diff --git a/packages/button/src/components/button-component/index.ts b/packages/button/src/components/button-component/index.ts
new file mode 100644
index 0000000000..cb7a81fb3c
--- /dev/null
+++ b/packages/button/src/components/button-component/index.ts
@@ -0,0 +1 @@
+export { ButtonComponent } from './Component';
diff --git a/packages/button/src/components/button-content/component.tsx b/packages/button/src/components/button-content/component.tsx
new file mode 100644
index 0000000000..c7256c7daf
--- /dev/null
+++ b/packages/button/src/components/button-content/component.tsx
@@ -0,0 +1,28 @@
+import React, { type FC, Fragment } from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Spinner } from '@alfalab/core-components-spinner';
+
+import { type BaseButtonContentProps } from '../base-button-candidate';
+
+import styles from './index.module.css';
+
+export const ButtonContent: FC<BaseButtonContentProps> = ({
+    loading,
+    children,
+    loaderClassName,
+    dataTestId,
+}) => (
+    <Fragment>
+        {children}
+        {loading && (
+            <Spinner
+                visible={true}
+                preset={24}
+                dataTestId={getDataTestId(dataTestId, 'loader')}
+                className={cn(styles.component, loaderClassName)}
+            />
+        )}
+    </Fragment>
+);
diff --git a/packages/button/src/components/button-content/index.module.css b/packages/button/src/components/button-content/index.module.css
new file mode 100644
index 0000000000..e4834c160f
--- /dev/null
+++ b/packages/button/src/components/button-content/index.module.css
@@ -0,0 +1,8 @@
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
+
+.component {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+}
diff --git a/packages/button/src/components/button-content/index.ts b/packages/button/src/components/button-content/index.ts
new file mode 100644
index 0000000000..bb824842ce
--- /dev/null
+++ b/packages/button/src/components/button-content/index.ts
@@ -0,0 +1 @@
+export * from './component';
diff --git a/packages/button/src/components/button-layout/component.tsx b/packages/button/src/components/button-layout/component.tsx
new file mode 100644
index 0000000000..52e53f2c4f
--- /dev/null
+++ b/packages/button/src/components/button-layout/component.tsx
@@ -0,0 +1,90 @@
+import React, { Children, forwardRef } from 'react';
+import cn from 'classnames';
+
+import {
+    BUTTON_DEFAULT_SHAPE,
+    BUTTON_DEFAULT_SIZE,
+    BUTTON_DEFAULT_TEXT_RESIZING,
+} from '../../constants/const';
+import { type ButtonLayoutProps, type ButtonRef } from '../../typings';
+import { BaseButtonCandidate } from '../base-button-candidate';
+import { ButtonComponent } from '../button-component';
+import { ButtonContent } from '../button-content';
+
+import styles from './index.module.css';
+
+export const ButtonLayout = forwardRef<ButtonRef, ButtonLayoutProps>(
+    (
+        {
+            children,
+            layout,
+            shape = BUTTON_DEFAULT_SHAPE,
+            textResizing = BUTTON_DEFAULT_TEXT_RESIZING,
+            hint,
+            leftAddons,
+            rightAddons,
+            size = BUTTON_DEFAULT_SIZE,
+            className: classNameFromProps,
+            loaderClassName,
+            loading,
+            nowrap,
+            Component = ButtonComponent,
+            styles: stylesFromProps = [],
+            ...restProps
+        },
+        ref,
+    ) => {
+        const hasLabel = Children.toArray(children).length > 0;
+        const showHint = size >= 56 && Children.toArray(hint).length > 0;
+        const allStyles = [styles, ...stylesFromProps];
+        const className = cn(
+            allStyles.flatMap((s) => [s.component, loading && s.loading]),
+            styles[`size${size}`],
+            styles[textResizing],
+            {
+                [styles[shape]]: shape === 'rounded',
+                [styles.defaultPaddings]: hasLabel && layout === 'button',
+                [styles.defaultWidth]: hasLabel && layout === 'button',
+                [styles.minWidth]: !hasLabel && layout === 'button',
+                [styles.minHeight]: layout === 'button',
+            },
+            classNameFromProps,
+        );
+
+        return (
+            <BaseButtonCandidate
+                {...restProps}
+                ref={ref}
+                className={className}
+                Content={ButtonContent}
+                Component={Component}
+                loading={loading}
+                loaderClassName={cn(
+                    allStyles.map((s) => s.loader),
+                    loaderClassName,
+                )}
+                disabledClassName={cn(allStyles.map((s) => s.disabled))}
+            >
+                {Children.toArray(leftAddons).length > 0 && (
+                    <span className={styles.addon}>{leftAddons}</span>
+                )}
+                {hasLabel && (
+                    <span
+                        className={cn(styles.label, {
+                            [styles.nowrap]: nowrap,
+                            [styles.stretchText]: textResizing === 'fill',
+                        })}
+                    >
+                        {children}
+                        {showHint && (
+                            <span className={cn(allStyles.map((s) => s.hint))}>{hint}</span>
+                        )}
+                    </span>
+                )}
+                {Children.toArray(rightAddons).length > 0 && (
+                    <span className={styles.addon}>{rightAddons}</span>
+                )}
+            </BaseButtonCandidate>
+        );
+    },
+);
diff --git a/packages/button/src/components/button-layout/index.module.css b/packages/button/src/components/button-layout/index.module.css
new file mode 100644
index 0000000000..bdab53c1ba
--- /dev/null
+++ b/packages/button/src/components/button-layout/index.module.css
@@ -0,0 +1,109 @@
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
+@import '../../vars.css';
+
+@define-mixin button-size-mixin $height, $width, $gap, $padding-inline {
+    &.minWidth {
+        min-width: $height;
+    }
+
+    &.minHeight {
+        min-height: $height;
+    }
+
+    &.defaultWidth {
+        min-width: $width;
+    }
+
+    &.defaultPaddings {
+        padding: var(--gap-0) calc($padding-inline - var(--button-border-width));
+    }
+
+    .addon:first-child {
+        margin-right: $gap;
+    }
+
+    .addon:last-child {
+        margin-left: $gap;
+    }
+}
+
+.component {
+    position: relative;
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    /* Loading */
+
+    &.loading > *:not(.loader) {
+        opacity: 0;
+    }
+
+    /* Shape */
+
+    &.rounded {
+        border-radius: var(--border-radius-pill);
+    }
+
+    /* Text resing */
+
+    &.hug {
+        justify-content: center;
+        text-align: center;
+    }
+
+    &.fill {
+        text-align: left;
+    }
+
+    /* Size */
+
+    /* prettier-ignore */
+    @each $size, $typography-mixin, $height, $width, $gap, $padding-inline in
+        (32, action_primary_small, var(--size-xxs-height), 80px, var(--gap-6), var(--gap-16)),
+        (40, action_primary_small, var(--size-xs-height), 88px, var(--gap-6), var(--gap-20)),
+        (48, action_component_primary, var(--size-s-height), 104px, var(--gap-8), var(--gap-24)),
+        (56, action_component_primary, var(--size-m-height), 128px, var(--gap-8), 28px),
+        (64, action_primary_large, var(--size-l-height), 160px, var(--gap-12), var(--gap-32)),
+        (72, action_primary_large, var(--size-xl-height), 168px, var(--gap-12), 36px) {
+        &.size$(size) {
+            @mixin $(typography-mixin);
+            @mixin button-size-mixin $(height), $(width), $(gap), $(padding-inline);
+        }
+    }
+}
+
+/* Addons */
+
+.addon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+
+    .defaultPaddings & {
+        &:first-child {
+            margin-left: var(--gap-4-neg);
+        }
+        &:last-child {
+            margin-right: var(--gap-4-neg);
+        }
+    }
+}
+
+/* Label */
+
+.nowrap {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.stretchText {
+    flex-grow: 1;
+}
+
+/* Hint */
+
+.hint {
+    display: block;
+    @mixin paragraph_primary_small;
+}
diff --git a/packages/button/src/components/button-layout/index.ts b/packages/button/src/components/button-layout/index.ts
new file mode 100644
index 0000000000..598ed4a19c
--- /dev/null
+++ b/packages/button/src/components/button-layout/index.ts
@@ -0,0 +1 @@
+export { ButtonLayout } from './component';
diff --git a/packages/button/src/constants/const.ts b/packages/button/src/constants/const.ts
new file mode 100644
index 0000000000..24da22a49b
--- /dev/null
+++ b/packages/button/src/constants/const.ts
@@ -0,0 +1,3 @@
+export const BUTTON_DEFAULT_SHAPE = 'rectangular';
+export const BUTTON_DEFAULT_SIZE = 56;
+export const BUTTON_DEFAULT_TEXT_RESIZING = 'hug';
diff --git a/packages/button/src/desktop/Component.desktop.tsx b/packages/button/src/desktop/Component.desktop.tsx
index ceba7cc4df..27a3751e8a 100644
--- a/packages/button/src/desktop/Component.desktop.tsx
+++ b/packages/button/src/desktop/Component.desktop.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
 import { BaseButton } from '../components/base-button';
-import { type CommonButtonProps } from '../typings';
+import { type ButtonRef, type CommonButtonProps } from '../typings';
 
 import defaultColors from './default.desktop.module.css';
 import styles from './desktop.module.css';
@@ -12,8 +12,6 @@ const colorStyles = {
     inverted: invertedColors,
 };
 
-export const ButtonDesktop = forwardRef<HTMLAnchorElement | HTMLButtonElement, CommonButtonProps>(
-    (restProps, ref) => (
-        <BaseButton {...restProps} ref={ref} styles={styles} colorStylesMap={colorStyles} />
-    ),
-);
+export const ButtonDesktop = forwardRef<ButtonRef, CommonButtonProps>((restProps, ref) => (
+    <BaseButton {...restProps} ref={ref} styles={styles} colorStylesMap={colorStyles} />
+));
diff --git a/packages/button/src/desktop/default.desktop.module.css b/packages/button/src/desktop/default.desktop.module.css
index 1634b5a452..d4f517cbcc 100644
--- a/packages/button/src/desktop/default.desktop.module.css
+++ b/packages/button/src/desktop/default.desktop.module.css
@@ -1,78 +1,83 @@
 @import '../vars.css';
 
-.accent {
-    &:not([disabled]) .hint {
-        color: var(--button-accent-hint-color);
-    }
-}
-
-.primary {
-    color: var(--button-primary-color);
-    background-color: var(--button-primary-base-bg-color);
-
-    &:not([disabled]) .hint {
-        color: var(--button-primary-hint-color);
-    }
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-primary-hover-bg-color);
+.component {
+    &.accent {
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-accent-hint-color);
+            }
         }
     }
 
-    &:active {
-        background-color: var(--button-primary-active-bg-color);
-    }
-
-    & > .loader {
-        color: var(--button-spinner-primary-color);
-    }
-}
+    &.primary {
+        color: var(--button-primary-color);
+        background-color: var(--button-primary-base-bg-color);
 
-.secondary {
-    background-color: var(--button-secondary-base-bg-color);
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-primary-hover-bg-color);
+            }
 
-    &:hover {
-        background-color: var(--button-secondary-hover-bg-color);
-    }
+            &:active {
+                background-color: var(--button-primary-active-bg-color);
+            }
 
-    &:active {
-        background-color: var(--button-secondary-active-bg-color);
-    }
-}
-
-.text {
-    &:active {
-        color: var(--button-text-active-color);
-    }
-}
-
-.component[disabled] {
-    &.primary {
-        color: var(--button-primary-disabled-color);
-        background-color: var(--button-primary-disabled-bg-color);
+            .hint {
+                color: ar(--button-primary-hint-color);
+            }
+        }
 
-        &.loading {
-            color: var(--button-primary-color);
-            background-color: var(--button-primary-base-bg-color);
+        & .loader {
+            color: var(--button-spinner-primary-color);
         }
     }
 
     &.secondary {
-        color: var(--button-secondary-disabled-color);
-        background-color: var(--button-secondary-disabled-bg-color);
-    }
+        background-color: var(--button-secondary-base-bg-color);
 
-    &.outlined {
-        color: var(--button-outlined-disabled-color);
-        border-color: var(--button-outlined-disabled-border-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-secondary-hover-bg-color);
+            }
 
-    &.transparent {
-        color: var(--button-transparent-disabled-color);
+            &:active {
+                background-color: var(--button-secondary-active-bg-color);
+            }
+        }
     }
 
     &.text {
-        color: var(--button-text-disabled-color);
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-text-active-color);
+            }
+        }
+    }
+
+    @mixin disabled {
+        &:not(.loading) {
+            &.primary {
+                color: var(--button-primary-disabled-color);
+                background-color: var(--button-primary-disabled-bg-color);
+            }
+
+            &.secondary {
+                color: var(--button-secondary-disabled-color);
+                background-color: var(--button-secondary-disabled-bg-color);
+            }
+
+            &.outlined {
+                color: var(--button-outlined-disabled-color);
+                border-color: var(--button-outlined-disabled-border-color);
+            }
+
+            &.transparent {
+                color: var(--button-transparent-disabled-color);
+            }
+
+            &.text {
+                color: var(--button-text-disabled-color);
+            }
+        }
     }
 }
diff --git a/packages/button/src/desktop/desktop.module.css b/packages/button/src/desktop/desktop.module.css
index 058252f7e2..1346489ec7 100644
--- a/packages/button/src/desktop/desktop.module.css
+++ b/packages/button/src/desktop/desktop.module.css
@@ -1,25 +1,16 @@
 @import '../vars.css';
 
-.size-32 {
-    border-radius: var(--button-xxs-size-border-radius);
-}
-
-.size-40 {
-    border-radius: var(--button-xs-size-border-radius);
-}
-
-.size-48 {
-    border-radius: var(--button-s-size-border-radius);
-}
-
-.size-56 {
-    border-radius: var(--button-m-size-border-radius);
-}
-
-.size-64 {
-    border-radius: var(--button-l-size-border-radius);
-}
-
-.size-72 {
-    border-radius: var(--button-xl-size-border-radius);
+.component {
+    /* prettier-ignore */
+    @each $size, $border-radius in
+        (32, --button-xxs-size-border-radius),
+        (40, --button-xs-size-border-radius),
+        (48, --button-s-size-border-radius),
+        (56, --button-m-size-border-radius),
+        (64, --button-l-size-border-radius),
+        (72, --button-xl-size-border-radius) {
+        &.size$(size) {
+            border-radius: var($(border-radius));
+        }
+    }
 }
diff --git a/packages/button/src/desktop/inverted.desktop.module.css b/packages/button/src/desktop/inverted.desktop.module.css
index e1aa64135e..68a1b87fba 100644
--- a/packages/button/src/desktop/inverted.desktop.module.css
+++ b/packages/button/src/desktop/inverted.desktop.module.css
@@ -1,78 +1,82 @@
 @import '../vars.css';
 
-.accent {
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-accent-hint-color);
-    }
-}
-
-.primary {
-    color: var(--button-inverted-primary-color);
-    background-color: var(--button-inverted-primary-base-bg-color);
-
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-primary-hint-color);
-    }
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-primary-hover-bg-color);
+.component {
+    &.accent {
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-inverted-accent-hint-color);
+            }
         }
     }
 
-    &:active {
-        background-color: var(--button-inverted-primary-active-bg-color);
-    }
-
-    & > .loader {
-        color: var(--button-spinner-inverted-primary-color);
-    }
-}
-
-.secondary {
-    background-color: var(--button-inverted-secondary-base-bg-color);
-
-    &:hover {
-        background-color: var(--button-inverted-secondary-hover-bg-color);
-    }
-
-    &:active {
-        background-color: var(--button-inverted-secondary-active-bg-color);
-    }
-}
+    &.primary {
+        color: var(--button-inverted-primary-color);
+        background-color: var(--button-inverted-primary-base-bg-color);
 
-.text {
-    &:active {
-        color: var(--button-inverted-text-active-color);
-    }
-}
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-primary-hover-bg-color);
+            }
 
-.component[disabled] {
-    &.primary {
-        color: var(--button-inverted-primary-disabled-color);
-        background-color: var(--button-inverted-primary-disabled-bg-color);
+            &:active {
+                background-color: var(--button-inverted-primary-active-bg-color);
+            }
 
-        &.loading {
-            color: var(--button-inverted-primary-color);
-            background-color: var(--button-inverted-primary-base-bg-color);
+            .hint {
+                color: var(--button-inverted-primary-hint-color);
+            }
+        }
+        & .loader {
+            color: var(--button-spinner-inverted-primary-color);
         }
     }
 
     &.secondary {
-        color: var(--button-inverted-secondary-disabled-color);
-        background-color: var(--button-inverted-secondary-disabled-bg-color);
-    }
+        background-color: var(--button-inverted-secondary-base-bg-color);
 
-    &.outlined {
-        color: var(--button-inverted-outlined-disabled-color);
-        border-color: var(--button-inverted-outlined-disabled-border-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-secondary-hover-bg-color);
+            }
 
-    &.transparent {
-        color: var(--button-inverted-transparent-disabled-color);
+            &:active {
+                background-color: var(--button-inverted-secondary-active-bg-color);
+            }
+        }
     }
 
     &.text {
-        color: var(--button-inverted-text-disabled-color);
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-inverted-text-active-color);
+            }
+        }
+    }
+
+    @mixin disabled {
+        &:not(.loading) {
+            &.primary {
+                color: var(--button-inverted-primary-disabled-color);
+                background-color: var(--button-inverted-primary-disabled-bg-color);
+            }
+
+            &.secondary {
+                color: var(--button-inverted-secondary-disabled-color);
+                background-color: var(--button-inverted-secondary-disabled-bg-color);
+            }
+
+            &.outlined {
+                color: var(--button-inverted-outlined-disabled-color);
+                border-color: var(--button-inverted-outlined-disabled-border-color);
+            }
+
+            &.transparent {
+                color: var(--button-inverted-transparent-disabled-color);
+            }
+
+            &.text {
+                color: var(--button-inverted-text-disabled-color);
+            }
+        }
     }
 }
diff --git a/packages/button/src/mobile/Component.mobile.tsx b/packages/button/src/mobile/Component.mobile.tsx
index a21fe394e0..35112f78d1 100644
--- a/packages/button/src/mobile/Component.mobile.tsx
+++ b/packages/button/src/mobile/Component.mobile.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
 import { BaseButton } from '../components/base-button';
-import { type CommonButtonProps } from '../typings';
+import { type ButtonRef, type CommonButtonProps } from '../typings';
 
 import defaultColors from './default.mobile.module.css';
 import invertedColors from './inverted.mobile.module.css';
@@ -12,8 +12,6 @@ const colorStyles = {
     inverted: invertedColors,
 };
 
-export const ButtonMobile = forwardRef<HTMLAnchorElement | HTMLButtonElement, CommonButtonProps>(
-    (restProps, ref) => (
-        <BaseButton {...restProps} ref={ref} colorStylesMap={colorStyles} styles={styles} />
-    ),
-);
+export const ButtonMobile = forwardRef<ButtonRef, CommonButtonProps>((restProps, ref) => (
+    <BaseButton {...restProps} ref={ref} colorStylesMap={colorStyles} styles={styles} />
+));
diff --git a/packages/button/src/mobile/default.mobile.module.css b/packages/button/src/mobile/default.mobile.module.css
index a87a6b6180..e4b3d8c08f 100644
--- a/packages/button/src/mobile/default.mobile.module.css
+++ b/packages/button/src/mobile/default.mobile.module.css
@@ -1,74 +1,81 @@
 @import '../vars.css';
 
-.accent {
-    &:not([disabled]) .hint {
-        color: var(--button-mobile-accent-hint-color);
+.component {
+    &.accent {
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-mobile-accent-hint-color);
+            }
+        }
     }
-}
 
-.primary {
-    color: var(--button-primary-mobile-color);
-    background-color: var(--button-primary-mobile-base-bg-color);
+    &.primary {
+        color: var(--button-primary-mobile-color);
+        background-color: var(--button-primary-mobile-base-bg-color);
 
-    &:not([disabled]) .hint {
-        color: var(--button-mobile-primary-hint-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-primary-mobile-hover-bg-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-primary-mobile-hover-bg-color);
+            &:active {
+                background-color: var(--button-primary-mobile-active-bg-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-primary-mobile-active-bg-color);
-    }
+        & .loader {
+            color: var(--button-spinner-primary-mobile-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-primary-mobile-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-mobile-primary-hint-color);
+            }
+        }
     }
-}
-
-.secondary {
-    background-color: var(--button-secondary-mobile-base-bg-color);
 
-    &:active {
-        background-color: var(--button-secondary-mobile-active-bg-color);
-    }
-}
+    &.secondary {
+        background-color: var(--button-secondary-mobile-base-bg-color);
 
-.text {
-    &:active {
-        color: var(--button-text-mobile-active-color);
+        @mixin not-disabled {
+            &:active {
+                background-color: var(--button-secondary-mobile-active-bg-color);
+            }
+        }
     }
-}
-
-.component[disabled] {
-    &.primary {
-        color: var(--button-primary-mobile-disabled-color);
-        background-color: var(--button-primary-mobile-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-primary-mobile-color);
-            background-color: var(--button-primary-mobile-base-bg-color);
+    &.text {
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-text-mobile-active-color);
+            }
         }
     }
 
-    &.secondary {
-        color: var(--button-secondary-mobile-disabled-color);
-        background-color: var(--button-secondary-mobile-disabled-bg-color);
-    }
+    @mixin disabled {
+        &:not(.loading) {
+            &.primary {
+                color: var(--button-primary-mobile-disabled-color);
+                background-color: var(--button-primary-mobile-disabled-bg-color);
+            }
 
-    &.outlined {
-        color: var(--button-outlined-mobile-disabled-color);
-        border-color: var(--button-outlined-mobile-disabled-border-color);
-    }
+            &.secondary {
+                color: var(--button-secondary-mobile-disabled-color);
+                background-color: var(--button-secondary-mobile-disabled-bg-color);
+            }
 
-    &.transparent {
-        color: var(--button-transparent-mobile-disabled-color);
-    }
+            &.outlined {
+                color: var(--button-outlined-mobile-disabled-color);
+                border-color: var(--button-outlined-mobile-disabled-border-color);
+            }
 
-    &.text {
-        color: var(--button-text-mobile-disabled-color);
+            &.transparent {
+                color: var(--button-transparent-mobile-disabled-color);
+            }
+
+            &.text {
+                color: var(--button-text-mobile-disabled-color);
+            }
+        }
     }
 }
diff --git a/packages/button/src/mobile/inverted.mobile.module.css b/packages/button/src/mobile/inverted.mobile.module.css
index 18da950338..fd2710845a 100644
--- a/packages/button/src/mobile/inverted.mobile.module.css
+++ b/packages/button/src/mobile/inverted.mobile.module.css
@@ -1,74 +1,81 @@
 @import '../vars.css';
 
-.accent {
-    &:not([disabled]) .hint {
-        color: var(--button-mobile-inverted-accent-hint-color);
+.component {
+    &.accent {
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-mobile-inverted-accent-hint-color);
+            }
+        }
     }
-}
 
-.primary {
-    color: var(--button-inverted-primary-mobile-color);
-    background-color: var(--button-inverted-primary-mobile-base-bg-color);
+    &.primary {
+        color: var(--button-inverted-primary-mobile-color);
+        background-color: var(--button-inverted-primary-mobile-base-bg-color);
 
-    &:not([disabled]) .hint {
-        color: var(--button-mobile-inverted-primary-hint-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-primary-mobile-hover-bg-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-primary-mobile-hover-bg-color);
+            &:active {
+                background-color: var(--button-inverted-primary-mobile-active-bg-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-inverted-primary-mobile-active-bg-color);
-    }
+        & .loader {
+            color: var(--button-spinner-inverted-primary-mobile-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-primary-mobile-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-mobile-inverted-primary-hint-color);
+            }
+        }
     }
-}
-
-.secondary {
-    background-color: var(--button-inverted-secondary-mobile-base-bg-color);
 
-    &:active {
-        background-color: var(--button-inverted-secondary-mobile-active-bg-color);
-    }
-}
+    &.secondary {
+        background-color: var(--button-inverted-secondary-mobile-base-bg-color);
 
-.text {
-    &:active {
-        color: var(--button-inverted-text-mobile-active-color);
+        @mixin not-disabled {
+            &:active {
+                background-color: var(--button-inverted-secondary-mobile-active-bg-color);
+            }
+        }
     }
-}
-
-.component[disabled] {
-    &.primary {
-        color: var(--button-inverted-primary-mobile-disabled-color);
-        background-color: var(--button-inverted-primary-mobile-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-inverted-primary-mobile-color);
-            background-color: var(--button-inverted-primary-mobile-base-bg-color);
+    &.text {
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-inverted-text-mobile-active-color);
+            }
         }
     }
 
-    &.secondary {
-        color: var(--button-inverted-secondary-mobile-disabled-color);
-        background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
-    }
+    @mixin disabled {
+        &:not(.loading) {
+            &.primary {
+                color: var(--button-inverted-primary-mobile-disabled-color);
+                background-color: var(--button-inverted-primary-mobile-disabled-bg-color);
+            }
 
-    &.outlined {
-        color: var(--button-inverted-outlined-mobile-disabled-color);
-        border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
-    }
+            &.secondary {
+                color: var(--button-inverted-secondary-mobile-disabled-color);
+                background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
+            }
 
-    &.transparent {
-        color: var(--button-inverted-transparent-mobile-disabled-color);
-    }
+            &.outlined {
+                color: var(--button-inverted-outlined-mobile-disabled-color);
+                border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
+            }
 
-    &.text {
-        color: var(--button-inverted-text-mobile-disabled-color);
+            &.transparent {
+                color: var(--button-inverted-transparent-mobile-disabled-color);
+            }
+
+            &.text {
+                color: var(--button-inverted-text-mobile-disabled-color);
+            }
+        }
     }
 }
diff --git a/packages/button/src/mobile/mobile.module.css b/packages/button/src/mobile/mobile.module.css
index 3d1ca92448..84df4b7696 100644
--- a/packages/button/src/mobile/mobile.module.css
+++ b/packages/button/src/mobile/mobile.module.css
@@ -1,25 +1,16 @@
 @import '../vars.css';
 
-.size-32 {
-    border-radius: var(--button-xxs-size-mobile-border-radius);
-}
-
-.size-40 {
-    border-radius: var(--button-xs-size-mobile-border-radius);
-}
-
-.size-48 {
-    border-radius: var(--button-s-size-mobile-border-radius);
-}
-
-.size-56 {
-    border-radius: var(--button-m-size-mobile-border-radius);
-}
-
-.size-64 {
-    border-radius: var(--button-l-size-mobile-border-radius);
-}
-
-.size-72 {
-    border-radius: var(--button-xl-size-mobile-border-radius);
+.component {
+    /* prettier-ignore */
+    @each $size, $border-radius in
+        (32, --button-xxs-size-mobile-border-radius),
+        (40, --button-xs-size-mobile-border-radius),
+        (48, --button-s-size-mobile-border-radius),
+        (56, --button-m-size-mobile-border-radius),
+        (64, --button-l-size-mobile-border-radius),
+        (72, --button-xl-size-mobile-border-radius) {
+        &.size$(size) {
+            border-radius: var($(border-radius));
+        }
+    }
 }
diff --git a/packages/button/src/shared/hooks.ts b/packages/button/src/shared/hooks.ts
new file mode 100644
index 0000000000..20054eaf59
--- /dev/null
+++ b/packages/button/src/shared/hooks.ts
@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { LOADER_MIN_DISPLAY_INTERVAL } from '../constants/loader-min-display-interval';
+
+export function useLoading(loading: boolean | undefined = false) {
+    const [loaderTimePassed, setLoaderTimePassed] = useState(true);
+    const timer = useRef<number>();
+
+    useEffect(() => {
+        if (loading) {
+            setLoaderTimePassed(false);
+            clearTimeout(timer.current);
+
+            timer.current = window.setTimeout(() => {
+                setLoaderTimePassed(true);
+                timer.current = undefined;
+            }, LOADER_MIN_DISPLAY_INTERVAL);
+        }
+    }, [loading]);
+
+    useEffect(() => () => clearTimeout(timer.current), []);
+
+    return loading || !loaderTimePassed;
+}
diff --git a/packages/button/src/shared/index.ts b/packages/button/src/shared/index.ts
index 21115f7b85..4af5142953 100644
--- a/packages/button/src/shared/index.ts
+++ b/packages/button/src/shared/index.ts
@@ -1 +1,2 @@
 export { getButtonTestIds } from '../utils';
+export { useLoading } from './hooks';
diff --git a/packages/button/src/typings.ts b/packages/button/src/typings.ts
index bc55f9567a..afb6389213 100644
--- a/packages/button/src/typings.ts
+++ b/packages/button/src/typings.ts
@@ -1,25 +1,28 @@
+import { type ReactNode } from 'react';
+
 import {
-    type AnchorHTMLAttributes,
-    type ButtonHTMLAttributes,
-    type ElementType,
-    type ReactNode,
-} from 'react';
-
-export type StyleColors = {
-    default: {
-        [key: string]: string;
-    };
-    inverted: {
-        [key: string]: string;
-    };
-};
+    type BaseButtonOwnProps,
+    type ButtonPropsFactory,
+} from './components/base-button-candidate';
+
+interface StylesMap {
+    [key: string]: string;
+}
 
-type ComponentProps = {
+export interface StyleColors {
+    default: StylesMap;
+    inverted: StylesMap;
+}
+
+type OmitStrict<T, K extends keyof T> = Omit<T, K>;
+
+export interface ButtonLayoutOwnProps
+    extends OmitStrict<BaseButtonOwnProps, 'disabledClassName' | 'Content'> {
     /**
-     * Тип кнопки
-     * @default secondary
+     * Лэйаут кнопки
+     * @default button
      */
-    view?: 'accent' | 'primary' | 'secondary' | 'outlined' | 'transparent' | 'text';
+    layout?: 'button' | 'text';
 
     /**
      * Форма кнопки
@@ -34,7 +37,7 @@ type ComponentProps = {
     textResizing?: 'fill' | 'hug';
 
     /**
-     *  Подпись под лейблом (видна только в размерах >= m)
+     *  Подпись под лейблом. Видна только при размерах `>=56`
      */
     hint?: ReactNode;
 
@@ -55,49 +58,29 @@ type ComponentProps = {
     size?: 32 | 40 | 48 | 56 | 64 | 72;
 
     /**
-     * Растягивает компонент на ширину контейнера
+     * Не переносить текст кнопки на новую строку
      * @default false
      */
-    block?: boolean;
+    nowrap?: boolean;
+}
 
+export type ButtonLayoutProps = ButtonPropsFactory<ButtonLayoutOwnProps> & {
+    styles?: StylesMap[];
+};
+
+export interface ComponentProps extends OmitStrict<ButtonLayoutOwnProps, 'layout'> {
     /**
-     * Дополнительный класс
+     * Тип кнопки
+     * @default secondary
      */
-    className?: string;
+    view?: 'accent' | 'primary' | 'secondary' | 'outlined' | 'transparent' | 'text';
 
     /**
      * Дополнительный класс для спиннера
+     * @deprecated Используйте `loaderClassName`
      */
     spinnerClassName?: string;
 
-    /**
-     * Выводит ссылку в виде кнопки
-     */
-    href?: string;
-
-    /**
-     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
-     */
-    Component?: ElementType;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для спиннера используется модификатор -loader
-     */
-    dataTestId?: string;
-
-    /**
-     * Показать лоадер
-     * @default false
-     */
-    loading?: boolean;
-
-    /**
-     * Не переносить текст кнопки на новую строку
-     * @default false
-     */
-    nowrap?: boolean;
-
     /**
      * Набор цветов для компонента
      */
@@ -108,29 +91,25 @@ type ComponentProps = {
      * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
      */
     allowBackdropBlur?: boolean;
+}
 
-    /**
-     * Дочерние элементы.
-     */
-    children?: ReactNode;
-};
-
-export type PrivateButtonProps = {
+export interface PrivateButtonProps {
     /**
      * Основные стили компонента.
      */
-    styles: { [key: string]: string };
+    styles: StylesMap;
 
     /**
      * Стили компонента для default и inverted режима.
      */
     colorStylesMap: StyleColors;
-};
+}
+
+export type ButtonRef = HTMLElement;
 
-export type CommonButtonProps = ComponentProps &
-    Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+export type CommonButtonProps = ButtonPropsFactory<ComponentProps>;
 
-export type ButtonProps = CommonButtonProps & {
+export interface ResponsiveProps {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
@@ -147,4 +126,6 @@ export type ButtonProps = CommonButtonProps & {
      * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
-};
+}
+
+export type ButtonProps = CommonButtonProps & ResponsiveProps;
diff --git a/packages/button/src/vars.css b/packages/button/src/vars.css
index 8bd67df7b8..9dd38762fa 100644
--- a/packages/button/src/vars.css
+++ b/packages/button/src/vars.css
@@ -1,6 +1,9 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 :root {
+    /* misc */
+    --button-border-width: 1px;
+
     /* border-radius desktop */
     --button-xxs-size-border-radius: var(--border-radius-8);
     --button-xs-size-border-radius: var(--border-radius-10);
diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
index 1829d219e9..3769f617a4 100644
--- a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
@@ -51,30 +51,26 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             >
               <button
                 aria-label="Предыдущий период"
-                class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+                class="component cc-icon-button arrow component primary component component border_32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="iconWrapper size-32 center"
                 >
-                  <span
-                    class="iconWrapper size-32 center"
-                  >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                      />
-                    </svg>
-                  </span>
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <path
+                      d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+                    />
+                  </svg>
                 </span>
               </button>
               <span
@@ -84,30 +80,26 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               </span>
               <button
                 aria-label="Следующий период"
-                class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+                class="component cc-icon-button arrow component primary component component border_32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="iconWrapper size-32 center"
                 >
-                  <span
-                    class="iconWrapper size-32 center"
-                  >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                      />
-                    </svg>
-                  </span>
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <path
+                      d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -169,11 +161,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="0"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -193,11 +185,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -217,11 +209,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -241,11 +233,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -267,11 +259,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -291,11 +283,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -315,11 +307,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -339,11 +331,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -363,11 +355,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -387,11 +379,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -411,11 +403,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -437,11 +429,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -461,11 +453,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -485,11 +477,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -509,11 +501,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -533,11 +525,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -557,11 +549,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -581,11 +573,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -607,11 +599,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -631,11 +623,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -655,11 +647,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -679,11 +671,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -703,11 +695,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -727,11 +719,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -751,11 +743,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -777,11 +769,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -801,11 +793,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -825,11 +817,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -849,11 +841,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -873,11 +865,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -897,11 +889,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -969,30 +961,26 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             >
               <button
                 aria-label="Предыдущий период"
-                class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+                class="component cc-icon-button arrow component primary component component border_32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="iconWrapper size-32 center"
                 >
-                  <span
-                    class="iconWrapper size-32 center"
-                  >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                      />
-                    </svg>
-                  </span>
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <path
+                      d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+                    />
+                  </svg>
                 </span>
               </button>
               <span
@@ -1002,30 +990,26 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               </span>
               <button
                 aria-label="Следующий период"
-                class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+                class="component cc-icon-button arrow component primary component component border_32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="iconWrapper size-32 center"
                 >
-                  <span
-                    class="iconWrapper size-32 center"
-                  >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                      />
-                    </svg>
-                  </span>
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <path
+                      d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -1090,11 +1074,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="0"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1116,11 +1100,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1140,11 +1124,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1164,11 +1148,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1188,11 +1172,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1212,11 +1196,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1236,11 +1220,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1260,11 +1244,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1286,11 +1270,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1310,11 +1294,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1334,11 +1318,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1358,11 +1342,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1382,11 +1366,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1406,11 +1390,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1430,11 +1414,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1456,11 +1440,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1480,11 +1464,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1504,11 +1488,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1528,11 +1512,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1552,11 +1536,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1576,11 +1560,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1600,11 +1584,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1626,11 +1610,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1650,11 +1634,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1674,11 +1658,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1698,11 +1682,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1722,11 +1706,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1746,11 +1730,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1770,11 +1754,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1796,11 +1780,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component size40 hug text text text size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
diff --git a/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
index 675e12edeb..ad1899aac6 100644
--- a/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
@@ -18,11 +18,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
           class="component monthYear"
         >
           <button
-            class="component text size-40 hug size-40 component text component text button filled button month"
+            class="component component component component component size40 hug text text text size40 button filled button month component"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               <span
                 class="buttonContent"
@@ -47,11 +47,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
             </span>
           </button>
           <button
-            class="component text size-40 hug size-40 component text component text button filled button year"
+            class="component component component component component size40 hug text text text size40 button filled button year component"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               <span
                 class="buttonContent"
@@ -138,11 +138,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -165,11 +165,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -190,11 +190,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -215,11 +215,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -240,11 +240,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -265,11 +265,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -290,11 +290,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -315,11 +315,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -342,11 +342,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -367,11 +367,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -392,11 +392,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -417,11 +417,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -442,11 +442,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -467,11 +467,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -492,11 +492,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -519,11 +519,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -544,11 +544,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -569,11 +569,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -594,11 +594,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -619,11 +619,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -644,11 +644,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -669,11 +669,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -696,11 +696,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -721,11 +721,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -746,11 +746,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -771,11 +771,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -796,11 +796,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -821,11 +821,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -846,11 +846,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component size40 hug text text text size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -873,11 +873,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="0"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded selected"
+                  class="component component component component component size40 hug text text text size40 day rounded selected component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
diff --git a/packages/calendar/src/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
index 557987d256..1617c1467e 100644
--- a/packages/calendar/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
@@ -15,11 +15,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component size40 hug text text text size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -44,11 +44,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component size40 hug text text text size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -135,11 +135,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -162,11 +162,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -187,11 +187,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -212,11 +212,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -237,11 +237,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -262,11 +262,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -287,11 +287,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -312,11 +312,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -339,11 +339,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -364,11 +364,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -389,11 +389,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -414,11 +414,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -439,11 +439,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -464,11 +464,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -489,11 +489,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -516,11 +516,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -541,11 +541,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -566,11 +566,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -591,11 +591,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -616,11 +616,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -641,11 +641,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -666,11 +666,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -693,11 +693,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -718,11 +718,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -743,11 +743,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -768,11 +768,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -793,11 +793,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -818,11 +818,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -843,11 +843,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -870,11 +870,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="0"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded selected"
+                class="component component component component component size40 hug text text text size40 day rounded selected component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -916,11 +916,11 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component size40 hug text text text size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -945,11 +945,11 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component size40 hug text text text size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -983,156 +983,156 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
       >
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1577836800000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Январь
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1580515200000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Февраль
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1583020800000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Март
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1585699200000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Апрель
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1588291200000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Май
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1590969600000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Июнь
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1593561600000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Июль
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1596240000000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Август
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1598918400000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Сентябрь
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1601510400000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Октябрь
           </span>
         </button>
         <button
           aria-selected="true"
-          class="component text size-40 hug size-40 component text component text button selected button"
+          class="component component component component component size40 hug text text text size40 button selected button component"
           data-date="1604188800000"
           tabindex="0"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Ноябрь
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component size40 hug text text text size40 button default button component"
           data-date="1606780800000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Декабрь
           </span>
@@ -1158,11 +1158,11 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component size40 hug text text text size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -1187,11 +1187,11 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component size40 hug text text text size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -1228,1235 +1228,1235 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
         >
           <button
             aria-selected="true"
-            class="component text size-40 hug size-40 component text component text button selected button"
+            class="component component component component component size40 hug text text text size40 button selected button component"
             data-date="1577836800000"
             tabindex="0"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2020
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1546300800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2019
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1514764800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2018
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1483228800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2017
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1451606400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2016
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1420070400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2015
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1388534400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2014
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1356998400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2013
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1325376000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2012
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1293840000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2011
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1262304000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2010
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1230768000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2009
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1199145600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2008
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1167609600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2007
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1136073600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2006
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1104537600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2005
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1072915200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2004
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1041379200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2003
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="1009843200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2002
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="978307200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2001
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="946684800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2000
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="915148800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1999
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="883612800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1998
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="852076800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1997
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="820454400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1996
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="788918400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1995
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="757382400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1994
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="725846400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1993
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="694224000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1992
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="662688000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1991
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="631152000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1990
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="599616000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1989
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="567993600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1988
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="536457600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1987
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="504921600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1986
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="473385600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1985
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="441763200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1984
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="410227200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1983
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="378691200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1982
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="347155200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1981
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="315532800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1980
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="283996800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1979
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="252460800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1978
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="220924800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1977
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="189302400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1976
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="157766400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1975
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="126230400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1974
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="94694400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1973
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="63072000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1972
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="31536000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1971
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="0"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1970
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-31536000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1969
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-63158400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1968
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-94694400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1967
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-126230400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1966
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-157766400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1965
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-189388800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1964
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-220924800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1963
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-252460800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1962
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-283996800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1961
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-315619200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1960
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-347155200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1959
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-378691200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1958
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-410227200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1957
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-441849600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1956
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-473385600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1955
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-504921600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1954
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-536457600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1953
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-568080000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1952
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-599616000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1951
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-631152000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1950
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-662688000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1949
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-694310400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1948
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-725846400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1947
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-757382400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1946
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-788918400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1945
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-820540800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1944
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-852076800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1943
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-883612800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1942
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-915148800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1941
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-946771200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1940
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-978307200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1939
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1009843200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1938
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1041379200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1937
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1073001600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1936
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1104537600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1935
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1136073600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1934
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1167609600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1933
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1199232000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1932
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1230768000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1931
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1262304000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1930
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1293840000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1929
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1325462400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1928
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1356998400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1927
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component size40 hug text text text size40 button default button component"
             data-date="-1388534400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1926
             </span>
@@ -2483,11 +2483,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component size40 hug text text text size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -2512,11 +2512,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component size40 hug text text text size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -2603,11 +2603,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2630,11 +2630,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2655,11 +2655,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2680,11 +2680,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2705,11 +2705,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2730,11 +2730,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2755,11 +2755,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2780,11 +2780,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2807,11 +2807,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2832,11 +2832,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2857,11 +2857,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2882,11 +2882,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2907,11 +2907,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2932,11 +2932,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2957,11 +2957,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2984,11 +2984,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3009,11 +3009,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3034,11 +3034,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3059,11 +3059,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3084,11 +3084,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3109,11 +3109,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3134,11 +3134,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3161,11 +3161,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3186,11 +3186,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3211,11 +3211,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3236,11 +3236,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3261,11 +3261,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3286,11 +3286,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3311,11 +3311,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3338,11 +3338,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="0"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded selected"
+                class="component component component component component size40 hug text text text size40 day rounded selected component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3386,30 +3386,26 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
       >
         <button
           aria-label="Предыдущий период"
-          class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+          class="component cc-icon-button arrow component primary component component border_32 component"
           data-test-id="period-slider-btn-previous-day"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="iconWrapper size-32 center"
           >
-            <span
-              class="iconWrapper size-32 center"
-            >
-              <svg
-                class="icon"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                />
-              </svg>
-            </span>
+            <svg
+              class="icon"
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+              />
+            </svg>
           </span>
         </button>
         <span
@@ -3419,30 +3415,26 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
         </span>
         <button
           aria-label="Следующий период"
-          class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+          class="component cc-icon-button arrow component primary component component border_32 component"
           data-test-id="period-slider-btn-next-day"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="iconWrapper size-32 center"
           >
-            <span
-              class="iconWrapper size-32 center"
-            >
-              <svg
-                class="icon"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                />
-              </svg>
-            </span>
+            <svg
+              class="icon"
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -3508,11 +3500,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3535,11 +3527,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3560,11 +3552,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3585,11 +3577,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3610,11 +3602,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3635,11 +3627,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3660,11 +3652,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3685,11 +3677,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3712,11 +3704,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3737,11 +3729,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3762,11 +3754,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3787,11 +3779,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3812,11 +3804,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3837,11 +3829,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3862,11 +3854,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3889,11 +3881,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3914,11 +3906,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3939,11 +3931,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3964,11 +3956,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3989,11 +3981,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4014,11 +4006,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4039,11 +4031,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4066,11 +4058,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4091,11 +4083,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4116,11 +4108,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4141,11 +4133,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4166,11 +4158,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4191,11 +4183,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4216,11 +4208,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4243,11 +4235,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="0"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded selected"
+                class="component component component component component size40 hug text text text size40 day rounded selected component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4289,11 +4281,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component size40 hug text text text size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -4318,11 +4310,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component size40 hug text text text size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -4409,11 +4401,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4436,11 +4428,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4461,11 +4453,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4486,11 +4478,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4511,11 +4503,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4536,11 +4528,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4561,11 +4553,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4586,11 +4578,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4613,11 +4605,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4638,11 +4630,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4663,11 +4655,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4688,11 +4680,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4713,11 +4705,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4738,11 +4730,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4763,11 +4755,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4790,11 +4782,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4815,11 +4807,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4840,11 +4832,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4865,11 +4857,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4890,11 +4882,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4915,11 +4907,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4940,11 +4932,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4967,11 +4959,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4992,11 +4984,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5017,11 +5009,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5042,11 +5034,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5067,11 +5059,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5092,11 +5084,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5117,11 +5109,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component size40 hug text text text size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5144,11 +5136,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="0"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded selected"
+                class="component component component component component size40 hug text text text size40 day rounded selected component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
diff --git a/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap
index 38a20b3fb4..e8d5541a91 100644
--- a/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap
@@ -9,31 +9,27 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
   >
     <button
       aria-label="Предыдущий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+      class="component cc-icon-button arrow component primary component component border_32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        class="iconWrapper size-32 center"
       >
-        <span
-          class="iconWrapper size-32 center"
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
         >
-          <svg
-            class="icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+          />
+        </svg>
       </span>
     </button>
     <span
@@ -43,31 +39,27 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
     </span>
     <button
       aria-label="Следующий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+      class="component cc-icon-button arrow component primary component component border_32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        class="iconWrapper size-32 center"
       >
-        <span
-          class="iconWrapper size-32 center"
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
         >
-          <svg
-            class="icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -83,31 +75,27 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
   >
     <button
       aria-label="Предыдущий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+      class="component cc-icon-button arrow component primary component component border_32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        class="iconWrapper size-32 center"
       >
-        <span
-          class="iconWrapper size-32 center"
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
         >
-          <svg
-            class="icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+          />
+        </svg>
       </span>
     </button>
     <span
@@ -117,31 +105,27 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
     </span>
     <button
       aria-label="Следующий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+      class="component cc-icon-button arrow component primary component component border_32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        class="iconWrapper size-32 center"
       >
-        <span
-          class="iconWrapper size-32 center"
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
         >
-          <svg
-            class="icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+          />
+        </svg>
       </span>
     </button>
   </div>
diff --git a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
index 17ec893ba2..172a6f570b 100644
--- a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
@@ -136,11 +136,11 @@ exports[`Confirmation Snapshot tests should match snapshot with fatal error 1`]
         Выполните операцию с самого начала
       </span>
       <button
-        class="component secondary size-40 hug size-40 component secondary component secondary"
+        class="component component component component component size40 hug defaultPaddings defaultWidth minHeight secondary secondary secondary size40 component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           Понятно
         </span>
diff --git a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
index c42d6a3d2c..ba918a0a3a 100644
--- a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
@@ -515,11 +515,11 @@ exports[`Confirmation Snapshot tests should match snapshot with FATAL_ERROR scre
         Мы ограничили следующие попытки ввода, потому что код был введён неверно больше 5 раз.
       </span>
       <button
-        class="component secondary size-48 hug size-48 component secondary component secondary button"
+        class="component component component component component size48 hug defaultPaddings defaultWidth minHeight secondary secondary secondary size48 button component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           Понятно
         </span>
@@ -595,11 +595,11 @@ exports[`Confirmation Snapshot tests should match snapshot with HINT screen 1`]
         Если номер не меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.
       </span>
       <button
-        class="component secondary size-48 hug size-48 component secondary component secondary hintButton"
+        class="component component component component component size48 hug defaultPaddings defaultWidth minHeight secondary secondary secondary size48 hintButton component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           Вернуться к вводу кода
         </span>
@@ -676,11 +676,11 @@ exports[`Confirmation Snapshot tests should match snapshot with TEMP_BLOCK_OVER
         Теперь можно запросить новый код
       </span>
       <button
-        class="component secondary size-48 hug size-48 component secondary component secondary button"
+        class="component component component component component size48 hug defaultPaddings defaultWidth minHeight secondary secondary secondary size48 button component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           Запросить новый код
         </span>
diff --git a/packages/custom-button/package.json b/packages/custom-button/package.json
index 8ce3e2b6d0..1dc8f3c8a6 100644
--- a/packages/custom-button/package.json
+++ b/packages/custom-button/package.json
@@ -11,6 +11,7 @@
     "module": "./esm/index.js",
     "dependencies": {
         "@alfalab/core-components-button": "^13.1.0",
+        "@alfalab/core-components-mq": "^6.0.2",
         "classnames": "^2.5.1",
         "tslib": "^2.4.0"
     },
diff --git a/packages/custom-button/src/Component.test.tsx b/packages/custom-button/src/Component.test.tsx
index a353cf1aae..f595f7086a 100644
--- a/packages/custom-button/src/Component.test.tsx
+++ b/packages/custom-button/src/Component.test.tsx
@@ -87,14 +87,14 @@ describe('CustomButton', () => {
             expect(container.firstElementChild).toHaveClass(className);
         });
 
-        it('should have `customButton` class as default', () => {
+        it('should have `component` class as default', () => {
             const { container } = render(<CustomButton />);
-            expect(container.firstElementChild).toHaveClass('customButton');
+            expect(container.firstElementChild).toHaveClass('component');
         });
 
         it('should have `white` class as default', () => {
             const { container } = render(<CustomButton />);
-            expect(container.firstElementChild).toHaveClass('customButton');
+            expect(container.firstElementChild).toHaveClass('white');
         });
 
         it('should have `black` class', () => {
diff --git a/packages/custom-button/src/Component.tsx b/packages/custom-button/src/Component.tsx
index 02d3e482a1..6bcee2b014 100644
--- a/packages/custom-button/src/Component.tsx
+++ b/packages/custom-button/src/Component.tsx
@@ -1,16 +1,36 @@
 import React, { forwardRef } from 'react';
 
-import { Button } from '@alfalab/core-components-button';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { BaseCustomButton } from './components/base-custom-button';
 import { type CustomButtonProps } from './types/props';
 
+import desktopStyles from './desktop/index.module.css';
+import mobileStylse from './mobile/index.module.css';
+
 export const CustomButton = forwardRef<HTMLAnchorElement | HTMLButtonElement, CustomButtonProps>(
-    ({ children, ...restProps }, ref) => (
-        <BaseCustomButton ref={ref} {...restProps} componentButton={Button}>
-            {children}
-        </BaseCustomButton>
-    ),
+    (
+        {
+            children,
+            breakpoint,
+            client,
+            defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',
+            ...restProps
+        },
+        ref,
+    ) => {
+        const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
+
+        return (
+            <BaseCustomButton
+                {...restProps}
+                ref={ref}
+                styles={isDesktop ? desktopStyles : mobileStylse}
+            >
+                {children}
+            </BaseCustomButton>
+        );
+    },
 );
 
 CustomButton.displayName = 'CustomButton';
diff --git a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-hover-state-background-color-1-content-color-0-state-type-0-snap.png b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-hover-state-background-color-1-content-color-0-state-type-0-snap.png
index c342c84547..ce66284c1e 100644
--- a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-hover-state-background-color-1-content-color-0-state-type-0-snap.png
+++ b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-hover-state-background-color-1-content-color-0-state-type-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4686b63432618d9727a750a1f55cc7b83dcb47f874c9829d7692a3f88726a007
-size 2204
+oid sha256:0ad610331a37fa95d0f5488fff93824a8856898a1159076c0eea82a4dc807d37
+size 2051
diff --git a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-0-content-color-0-state-type-0-snap.png b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-0-content-color-0-state-type-0-snap.png
index 7011a9bcfd..eb2daf5513 100644
--- a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-0-content-color-0-state-type-0-snap.png
+++ b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-0-content-color-0-state-type-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:471057cba5f04a1b956a8b35adb40ea9912cd1db1e7f4542a481302b4fec8339
-size 2429
+oid sha256:3ec44ef1864c30227b351af208e0421863eda920d1fe47bbdd5fd7d547395336
+size 2133
diff --git a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-0-content-color-1-state-type-1-snap.png b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-0-content-color-1-state-type-1-snap.png
index f5ca02c215..ee70b9781b 100644
--- a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-0-content-color-1-state-type-1-snap.png
+++ b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-0-content-color-1-state-type-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cee9a70c7bc004569446df1b877a4de35b08ca4c3c291834afb4ecc35d2f18e7
-size 2483
+oid sha256:f32b90bd50bc0231aad1754e90fcc87c1c85bd3125fd13aeddcf6990a3065e32
+size 2425
diff --git a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-1-content-color-0-state-type-0-snap.png b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-1-content-color-0-state-type-0-snap.png
index fc446a09b7..488a1f2eab 100644
--- a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-1-content-color-0-state-type-0-snap.png
+++ b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-1-content-color-0-state-type-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:83b5c7f4403f68a947daccb04d5488633e1d4f4eae9fe5906f3f95e4e0eb2ae4
-size 2355
+oid sha256:4ea4cf3def7a931bf4a57f61f9768b88cb61bab6d3313f603b4bb944d1bd1395
+size 2098
diff --git a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-1-content-color-1-state-type-1-snap.png b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-1-content-color-1-state-type-1-snap.png
index 716efdc368..0fec8933b7 100644
--- a/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-1-content-color-1-state-type-1-snap.png
+++ b/packages/custom-button/src/__image_snapshots__/hover-custom-button-screenshots-pressed-state-background-color-1-content-color-1-state-type-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3a93960eb029de824c42299a44b0f446a4c96a3f603f36d4aa67833c770e6e6d
-size 2414
+oid sha256:2a4493c10360f0ba991f99cd0fd6721c50cbae2e6dbf38cf9d9bb0c0fe7a6596
+size 2377
diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
index c331e5d593..2cd87cf4ec 100644
--- a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`CustomButton Snapshots tests should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -14,7 +14,7 @@ exports[`CustomButton Snapshots tests should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -79,14 +79,14 @@ exports[`CustomButton Snapshots tests should match snapshot 2`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -94,7 +94,7 @@ exports[`CustomButton Snapshots tests should match snapshot 2`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -159,21 +159,21 @@ exports[`CustomButton Snapshots tests should match snapshot 3`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -181,7 +181,7 @@ exports[`CustomButton Snapshots tests should match snapshot 3`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -246,7 +246,7 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -254,7 +254,7 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -319,14 +319,14 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -334,7 +334,7 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -399,21 +399,21 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -421,7 +421,7 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -486,7 +486,7 @@ exports[`CustomButton Snapshots tests should render black color content 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border black darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -494,7 +494,7 @@ exports[`CustomButton Snapshots tests should render black color content 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border black darkening disableType-default size56 component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -559,14 +559,14 @@ exports[`CustomButton Snapshots tests should render black color content 2`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border black darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border black darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -574,7 +574,7 @@ exports[`CustomButton Snapshots tests should render black color content 2`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border black darkening disableType-default size56 component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -639,21 +639,21 @@ exports[`CustomButton Snapshots tests should render black color content 3`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border black darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border black darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border black darkening disableType-default size56 component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -661,7 +661,7 @@ exports[`CustomButton Snapshots tests should render black color content 3`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border black darkening disableType-default size56 component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -726,7 +726,7 @@ exports[`CustomButton Snapshots tests should render custom background color 1`]
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
@@ -734,7 +734,7 @@ exports[`CustomButton Snapshots tests should render custom background color 1`]
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       style="background: rgb(0, 255, 0);"
       type="button"
     />
@@ -799,14 +799,14 @@ exports[`CustomButton Snapshots tests should render custom background color 2`]
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
@@ -814,7 +814,7 @@ exports[`CustomButton Snapshots tests should render custom background color 2`]
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       style="background: rgb(0, 255, 0);"
       type="button"
     />
@@ -879,21 +879,21 @@ exports[`CustomButton Snapshots tests should render custom background color 3`]
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
@@ -901,7 +901,7 @@ exports[`CustomButton Snapshots tests should render custom background color 3`]
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       style="background: rgb(0, 255, 0);"
       type="button"
     />
@@ -966,13 +966,13 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 1`] =
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component component loading component loading component loading size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
         <svg
-          class="spinner component preset24 loader loader loader visible"
+          class="spinner component preset24 component loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -1012,13 +1012,13 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 1`] =
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+      class="component component loading component loading component loading size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
     >
       <svg
-        class="spinner component preset24 loader loader loader visible"
+        class="spinner component preset24 component loader loader loader visible"
         style="height: 20px; width: 20px;"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -1115,13 +1115,13 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component component loading component loading component loading size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
         <svg
-          class="spinner component preset24 loader loader loader visible"
+          class="spinner component preset24 component loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -1160,13 +1160,13 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component component loading component loading component loading size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
         <svg
-          class="spinner component preset24 loader loader loader visible"
+          class="spinner component preset24 component loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -1206,13 +1206,13 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+      class="component component loading component loading component loading size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
     >
       <svg
-        class="spinner component preset24 loader loader loader visible"
+        class="spinner component preset24 component loader loader loader visible"
         style="height: 20px; width: 20px;"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -1309,13 +1309,13 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component component loading component loading component loading size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
         <svg
-          class="spinner component preset24 loader loader loader visible"
+          class="spinner component preset24 component loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -1354,13 +1354,13 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component component loading component loading component loading size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
         <svg
-          class="spinner component preset24 loader loader loader visible"
+          class="spinner component preset24 component loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -1399,13 +1399,13 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component component loading component loading component loading size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
         <svg
-          class="spinner component preset24 loader loader loader visible"
+          class="spinner component preset24 component loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -1445,13 +1445,13 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+      class="component component loading component loading component loading size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
     >
       <svg
-        class="spinner component preset24 loader loader loader visible"
+        class="spinner component preset24 component loader loader loader visible"
         style="height: 20px; width: 20px;"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/custom-button/src/components/base-custom-button/base-custom-button.tsx b/packages/custom-button/src/components/base-custom-button/base-custom-button.tsx
index 0d432c3a60..f9405496ee 100644
--- a/packages/custom-button/src/components/base-custom-button/base-custom-button.tsx
+++ b/packages/custom-button/src/components/base-custom-button/base-custom-button.tsx
@@ -1,56 +1,64 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-import { type Button } from '@alfalab/core-components-button';
-import { type ButtonDesktop } from '@alfalab/core-components-button/desktop';
-import { type ButtonMobile } from '@alfalab/core-components-button/mobile';
+import { ButtonLayout } from '@alfalab/core-components-button/components/button-layout';
+import {
+    BUTTON_DEFAULT_SHAPE,
+    BUTTON_DEFAULT_SIZE,
+} from '@alfalab/core-components-button/constants/const';
+import { useLoading } from '@alfalab/core-components-button/shared';
 
 import { DEFAULT_BUTTON_COLOR, DEFAULT_CONTENT_COLOR } from '../../constants/default-colors';
-import { type CustomButtonProps } from '../../types/props';
+import { type CommonCustomButtonProps } from '../../types/props';
 
 import styles from './index.module.css';
 
 export const BaseCustomButton = forwardRef<
     HTMLAnchorElement | HTMLButtonElement,
-    CustomButtonProps & {
-        componentButton: typeof Button | typeof ButtonDesktop | typeof ButtonMobile;
-    }
+    CommonCustomButtonProps & { styles?: Record<string, string> }
 >(
     (
         {
             children,
-            className,
-            loading,
+            className: classNameFromProps,
+            loading: loadingFromProps,
             backgroundColor = DEFAULT_BUTTON_COLOR,
             contentColor = DEFAULT_CONTENT_COLOR,
             stateType = 'darkening',
             disableType = 'default',
-            componentButton: ComponentButton,
+            style,
+            shape = BUTTON_DEFAULT_SHAPE,
+            styles: stylesFromProps = {},
             ...restProps
         },
         ref,
-    ) => (
-        <ComponentButton
-            style={{ ...(!restProps.disabled && { background: backgroundColor }) }}
-            {...restProps}
-            view='primary'
-            ref={ref}
-            className={cn(
-                styles.customButton,
-                styles.border,
-                className,
-                styles[contentColor],
-                styles[stateType],
-                styles[`disableType-${disableType}`],
-                {
-                    [styles.customLoading]: loading,
-                },
-            )}
-            loading={loading}
-        >
-            {children}
-        </ComponentButton>
-    ),
+    ) => {
+        const loading = useLoading(loadingFromProps);
+        const { disabled, size = BUTTON_DEFAULT_SIZE } = restProps;
+        const className = cn(
+            styles.component,
+            styles.border,
+            styles[contentColor],
+            styles[stateType],
+            styles[`disableType-${disableType}`],
+            { [stylesFromProps[`size${size}`]]: shape === 'rectangular' },
+            classNameFromProps,
+        );
+
+        return (
+            <ButtonLayout
+                {...restProps}
+                ref={ref}
+                layout='button'
+                style={{ ...style, background: disabled ? undefined : backgroundColor }}
+                className={className}
+                loading={loading}
+                styles={[styles, stylesFromProps]}
+            >
+                {children}
+            </ButtonLayout>
+        );
+    },
 );
 
 BaseCustomButton.displayName = 'BaseCustomButton';
diff --git a/packages/custom-button/src/components/base-custom-button/index.module.css b/packages/custom-button/src/components/base-custom-button/index.module.css
index 997c8fd782..f0510608b5 100644
--- a/packages/custom-button/src/components/base-custom-button/index.module.css
+++ b/packages/custom-button/src/components/base-custom-button/index.module.css
@@ -1,128 +1,70 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
+@import '@alfalab/core-components-button/src/vars.css';
 
-@define-mixin hover-before {
-    @media (hover: hover) {
-        &:hover:before {
-            @mixin-content;
-        }
-    }
-}
-
-.customButton {
+.component {
     overflow: hidden;
-    position: relative;
 
     &.border {
-        border: 1px solid transparent;
-    }
-
-    &.white * {
-        color: var(--color-light-text-primary-inverted);
-    }
-
-    &.black * {
-        color: var(--color-light-text-primary);
-    }
-
-    &.static-white * {
-        color: var(--color-static-text-primary-inverted);
-    }
-
-    &.static-black * {
-        color: var(--color-static-text-primary);
-    }
-
-    & span {
-        position: relative;
-        z-index: 3;
+        border: var(--button-border-width) solid transparent;
     }
 
     &:before {
-        position: absolute;
-        left: var(--gap-0);
-        right: var(--gap-0);
-        top: var(--gap-0);
-        bottom: var(--gap-0);
-        background-color: rgba(0, 0, 0, 0);
         content: '';
-        transition: 0.2s;
-        opacity: 1;
-        pointer-events: none;
-    }
-
-    &.darkening {
-        @mixin hover-before {
-            background-color: var(--color-light-neutral-translucent-200);
-        }
-
-        &:active:before {
-            background-color: var(--color-light-neutral-translucent-400);
-        }
-    }
-
-    &.lightening {
-        @mixin hover-before {
-            background-color: var(--color-light-neutral-translucent-200-inverted);
-        }
-
-        &:active:before {
-            background-color: var(--color-light-neutral-translucent-400-inverted);
-        }
-    }
-
-    &.static-darkening {
-        @mixin hover-before {
-            background-color: rgba(0, 0, 0, 0.07);
-        }
-
-        &:active:before {
-            background-color: rgba(0, 0, 0, 0.15);
-        }
-    }
-
-    &.static-lightening {
-        @mixin hover-before {
-            background-color: rgba(255, 255, 255, 0.07);
-        }
-
-        &:active:before {
-            background-color: rgba(255, 255, 255, 0.15);
-        }
-    }
-}
-
-/* Disabled */
-
-.customButton:disabled {
-    &.disableType-default {
-        background-color: var(--color-light-neutral-translucent-100);
-
-        & span {
-            color: var(--color-light-text-tertiary);
-        }
-    }
-
-    &.disableType-static {
-        background-color: var(--color-static-neutral-translucent-100);
-
-        & span {
-            color: var(--color-static-text-tertiary);
+        position: absolute;
+        inset: 0;
+        transition: background 0.2s;
+    }
+
+    /* prettier-ignore */
+    @each $content-color, $color in
+        (white, --color-light-text-primary-inverted),
+        (black, --color-light-text-primary),
+        (static-white, --color-static-text-primary-inverted),
+        (static-black, --color-static-text-primary) {
+        &.$(content-color) {
+            &,
+            & .loader {
+                color: var($(color));
+            }
         }
     }
 
-    &.disableType-inverted {
-        background-color: var(--color-light-neutral-translucent-100-inverted);
-
-        & span {
-            color: var(--color-light-text-tertiary-inverted);
+    @mixin not-disabled {
+        /* prettier-ignore */
+        @each $state, $hover, $active in
+            (darkening, var(--color-light-neutral-translucent-200), var(--color-light-neutral-translucent-400)),
+            (lightening, var(--color-light-neutral-translucent-200-inverted), var(--color-light-neutral-translucent-400-inverted)),
+            (static-darkening, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.15)),
+            (static-lightening, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15)) {
+            &.$(state) {
+                @mixin hover {
+                    &:before {
+                        background: $hover;
+                    }
+                }
+
+                &:active:before {
+                    background: $active;
+                }
+            }
         }
     }
 
-    &.disableType-static-inverted {
-        background-color: var(--color-static-neutral-translucent-100-inverted);
-
-        & span {
-            color: var(--color-static-text-tertiary-inverted);
+    /* Disabled */
+
+    @mixin disabled {
+        &:not(.loading) {
+            /* prettier-ignore */
+            @each $disable-state, $color, $background in
+                (disableType-default, --color-light-text-tertiary, --color-light-neutral-translucent-100),
+                (disableType-static, --color-static-text-tertiary, --color-static-neutral-translucent-100),
+                (disableType-inverted, --color-light-text-tertiary-inverted, --color-light-neutral-translucent-100-inverted),
+                (disableType-static-inverted, --color-static-text-tertiary-inverted, --color-static-neutral-translucent-100-inverted) {
+                &.$(disable-state) {
+                    color: var($(color));
+                    background: var($(background));
+                }
+            }
         }
     }
 }
diff --git a/packages/custom-button/src/desktop/Component.desktop.tsx b/packages/custom-button/src/desktop/Component.desktop.tsx
index 17ec4fc512..2218cc09f9 100644
--- a/packages/custom-button/src/desktop/Component.desktop.tsx
+++ b/packages/custom-button/src/desktop/Component.desktop.tsx
@@ -1,15 +1,15 @@
 import React, { forwardRef } from 'react';
 
-import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
-
 import { BaseCustomButton } from '../components/base-custom-button';
-import { type CustomButtonProps } from '../types/props';
+import { type CommonCustomButtonProps } from '../types/props';
+
+import styles from './index.module.css';
 
 export const CustomButtonDesktop = forwardRef<
     HTMLAnchorElement | HTMLButtonElement,
-    CustomButtonProps
+    CommonCustomButtonProps
 >(({ children, ...restProps }, ref) => (
-    <BaseCustomButton ref={ref} {...restProps} componentButton={ButtonDesktop}>
+    <BaseCustomButton ref={ref} {...restProps} styles={styles}>
         {children}
     </BaseCustomButton>
 ));
diff --git a/packages/custom-button/src/desktop/index.module.css b/packages/custom-button/src/desktop/index.module.css
new file mode 100644
index 0000000000..dbb133a67e
--- /dev/null
+++ b/packages/custom-button/src/desktop/index.module.css
@@ -0,0 +1,16 @@
+@import '@alfalab/core-components-button/src/vars.css';
+
+.component {
+    /* prettier-ignore */
+    @each $size, $border-radius in
+        (32, --button-xxs-size-border-radius),
+        (40, --button-xs-size-border-radius),
+        (48, --button-s-size-border-radius),
+        (56, --button-m-size-border-radius),
+        (64, --button-l-size-border-radius),
+        (72, --button-xl-size-border-radius) {
+        &.size$(size) {
+            border-radius: var($border-radius);
+        }
+    }
+}
diff --git a/packages/custom-button/src/mobile/Component.mobile.tsx b/packages/custom-button/src/mobile/Component.mobile.tsx
index f641055096..b7ae20353b 100644
--- a/packages/custom-button/src/mobile/Component.mobile.tsx
+++ b/packages/custom-button/src/mobile/Component.mobile.tsx
@@ -1,15 +1,15 @@
 import React, { forwardRef } from 'react';
 
-import { ButtonMobile } from '@alfalab/core-components-button/mobile';
-
 import { BaseCustomButton } from '../components/base-custom-button';
-import { type CustomButtonProps } from '../types/props';
+import { type CommonCustomButtonProps } from '../types/props';
+
+import styles from './index.module.css';
 
 export const CustomButtonMobile = forwardRef<
     HTMLAnchorElement | HTMLButtonElement,
-    CustomButtonProps
+    CommonCustomButtonProps
 >(({ children, ...restProps }, ref) => (
-    <BaseCustomButton ref={ref} {...restProps} componentButton={ButtonMobile}>
+    <BaseCustomButton ref={ref} {...restProps} styles={styles}>
         {children}
     </BaseCustomButton>
 ));
diff --git a/packages/custom-button/src/mobile/index.module.css b/packages/custom-button/src/mobile/index.module.css
new file mode 100644
index 0000000000..b094fea131
--- /dev/null
+++ b/packages/custom-button/src/mobile/index.module.css
@@ -0,0 +1,16 @@
+@import '@alfalab/core-components-button/src/vars.css';
+
+.component {
+    /* prettier-ignore */
+    @each $size, $border-radius in
+        (32, --button-xxs-size-mobile-border-radius),
+        (40, --button-xs-size-mobile-border-radius),
+        (48, --button-s-size-mobile-border-radius),
+        (56, --button-m-size-mobile-border-radius),
+        (64, --button-l-size-mobile-border-radius),
+        (72, --button-xl-size-mobile-border-radius) {
+        &.size$(size) {
+            border-radius: var($border-radius);
+        }
+    }
+}
diff --git a/packages/custom-button/src/types/props.ts b/packages/custom-button/src/types/props.ts
index d52f898387..b9321b1fb4 100644
--- a/packages/custom-button/src/types/props.ts
+++ b/packages/custom-button/src/types/props.ts
@@ -1,8 +1,9 @@
-import { type AnchorHTMLAttributes, type ButtonHTMLAttributes } from 'react';
+import { type ButtonPropsFactory } from '@alfalab/core-components-button/components/base-button-candidate';
+import { type ButtonLayoutOwnProps } from '@alfalab/core-components-button/typings';
 
-import { type ButtonProps } from '@alfalab/core-components-button';
+type OmitStrict<T, K extends keyof T> = Omit<T, K>;
 
-export type ComponentProps = Omit<ButtonProps, 'view' | 'colors'> & {
+export interface ComponentProps extends OmitStrict<ButtonLayoutOwnProps, 'layout'> {
     /**
      * Цвет кнопки
      */
@@ -28,9 +29,27 @@ export type ComponentProps = Omit<ButtonProps, 'view' | 'colors'> & {
      * @default default
      */
     disableType?: 'default' | 'static' | 'inverted' | 'static-inverted';
-};
+}
 
-type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+interface ResponsiveProps {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+}
+
+export type CommonCustomButtonProps = ButtonPropsFactory<ComponentProps>;
 
-export type CustomButtonProps = Partial<AnchorButtonProps | NativeButtonProps>;
+export type CustomButtonProps = CommonCustomButtonProps & ResponsiveProps;
diff --git a/packages/custom-button/tsconfig.build.json b/packages/custom-button/tsconfig.build.json
index 8e3aeb2e36..cdf9ed042b 100644
--- a/packages/custom-button/tsconfig.build.json
+++ b/packages/custom-button/tsconfig.build.json
@@ -10,8 +10,13 @@
             "@alfalab/core-components-button": ["../button/src"],
             "@alfalab/core-components-button/*": ["../button/src/*"],
             "@alfalab/core-components-custom-button": ["./src"],
-            "@alfalab/core-components-custom-button/*": ["./src/*"]
+            "@alfalab/core-components-custom-button/*": ["./src/*"],
+            "@alfalab/core-components-mq": ["../mq/src"],
+            "@alfalab/core-components-mq/*": ["../mq/src/*"]
         }
     },
-    "references": [{ "path": "../button/tsconfig.build.json" }]
+    "references": [
+        { "path": "../button/tsconfig.build.json" },
+        { "path": "../mq/tsconfig.build.json" }
+    ]
 }
diff --git a/packages/custom-button/tsconfig.json b/packages/custom-button/tsconfig.json
index f580b79760..1bfca80461 100644
--- a/packages/custom-button/tsconfig.json
+++ b/packages/custom-button/tsconfig.json
@@ -10,6 +10,8 @@
             "@alfalab/core-components-button/*": ["../button/src/*"],
             "@alfalab/core-components-custom-button": ["./src"],
             "@alfalab/core-components-custom-button/*": ["./src/*"],
+            "@alfalab/core-components-mq": ["../mq/src"],
+            "@alfalab/core-components-mq/*": ["../mq/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
             "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
             "@alfalab/core-components-test-utils": ["../test-utils/src"],
@@ -18,6 +20,7 @@
     },
     "references": [
         { "path": "../button/tsconfig.build.json" },
+        { "path": "../mq/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../test-utils/tsconfig.build.json" }
     ]
diff --git a/packages/custom-picker-button/src/Component.test.tsx b/packages/custom-picker-button/src/Component.test.tsx
index 0e8d4df595..96553f2d05 100644
--- a/packages/custom-picker-button/src/Component.test.tsx
+++ b/packages/custom-picker-button/src/Component.test.tsx
@@ -144,10 +144,9 @@ describe('Render tests', () => {
             const button = document.querySelector('button');
             const icon = getByTestId('custom-picker-button-icon');
 
-            expect(button).toHaveClass('size-56');
-            expect(button).toHaveClass('primary');
-            expect(icon.getAttribute('width')).toBe(iconSize);
-            expect(icon.getAttribute('height')).toBe(iconSize);
+            expect(button).toHaveClass('size56');
+            expect(icon).toHaveAttribute('width', iconSize);
+            expect(icon).toHaveAttribute('height', iconSize);
         },
     );
 
@@ -161,7 +160,7 @@ describe('Render tests', () => {
             const button = document.querySelector('button');
             const icon = getByTestId('custom-picker-button-icon');
 
-            expect(button).toHaveClass(`size-${size}`);
+            expect(button).toHaveClass(`size${size}`);
             expect(icon.getAttribute('width')).toBe(iconSize);
             expect(icon.getAttribute('height')).toBe(iconSize);
         },
diff --git a/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap
index 03b26f954d..8e81f01540 100644
--- a/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Snapshots tests should display correctly 1`] = `
     <button
       aria-controls="downshift-:r0:-menu"
       aria-labelledby="downshift-:r0:-label"
-      class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+      class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border white darkening disableType-default size56 component"
       id="downshift-:r0:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
@@ -29,7 +29,7 @@ exports[`Snapshots tests should display correctly 1`] = `
         </span>
       </span>
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer"
@@ -66,7 +66,7 @@ exports[`Snapshots tests should display correctly 2`] = `
     <button
       aria-controls="downshift-:r4:-menu"
       aria-labelledby="downshift-:r4:-label"
-      class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+      class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border white darkening disableType-default size56 component"
       id="downshift-:r4:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
@@ -83,7 +83,7 @@ exports[`Snapshots tests should display correctly 2`] = `
         </span>
       </span>
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer"
@@ -120,7 +120,7 @@ exports[`Snapshots tests should display correctly 3`] = `
     <button
       aria-controls="downshift-:r8:-menu"
       aria-labelledby="downshift-:r8:-label"
-      class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+      class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border white darkening disableType-default size56 component"
       id="downshift-:r8:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
@@ -137,7 +137,7 @@ exports[`Snapshots tests should display correctly 3`] = `
         </span>
       </span>
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer"
@@ -174,14 +174,14 @@ exports[`Snapshots tests should display opened correctly 1`] = `
     <button
       aria-controls="downshift-:r3:-menu"
       aria-labelledby="downshift-:r3:-label"
-      class="component primary size-56 hug size-56 component primary component primary block iconOnly customButton border white darkening disableType-default"
+      class="component block component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       id="downshift-:r3:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer open"
@@ -633,14 +633,14 @@ exports[`Snapshots tests should display opened correctly 3`] = `
     <button
       aria-controls="downshift-:r7:-menu"
       aria-labelledby="downshift-:r7:-label"
-      class="component primary size-56 hug size-56 component primary component primary block iconOnly customButton border white darkening disableType-default"
+      class="component block component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       id="downshift-:r7:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer open"
@@ -1092,14 +1092,14 @@ exports[`Snapshots tests should display opened correctly 5`] = `
     <button
       aria-controls="downshift-:rb:-menu"
       aria-labelledby="downshift-:rb:-label"
-      class="component primary size-56 hug size-56 component primary component primary block iconOnly customButton border white darkening disableType-default"
+      class="component block component component component size56 hug minWidth minHeight component border white darkening disableType-default size56 component"
       id="downshift-:rb:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer open"
@@ -1557,7 +1557,7 @@ exports[`Snapshots tests should render black color content 1`] = `
         <button
           aria-controls="downshift-:r2:-menu"
           aria-labelledby="downshift-:r2:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+          class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border black darkening disableType-default size56 component"
           id="downshift-:r2:-input"
           style="background: rgb(255, 69, 195);"
           tabindex="0"
@@ -1574,7 +1574,7 @@ exports[`Snapshots tests should render black color content 1`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -1609,7 +1609,7 @@ exports[`Snapshots tests should render black color content 1`] = `
       <button
         aria-controls="downshift-:r2:-menu"
         aria-labelledby="downshift-:r2:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+        class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border black darkening disableType-default size56 component"
         id="downshift-:r2:-input"
         style="background: rgb(255, 69, 195);"
         tabindex="0"
@@ -1626,7 +1626,7 @@ exports[`Snapshots tests should render black color content 1`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -1721,7 +1721,7 @@ exports[`Snapshots tests should render black color content 2`] = `
         <button
           aria-controls="downshift-:r6:-menu"
           aria-labelledby="downshift-:r6:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+          class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border black darkening disableType-default size56 component"
           id="downshift-:r6:-input"
           style="background: rgb(255, 69, 195);"
           tabindex="0"
@@ -1738,7 +1738,7 @@ exports[`Snapshots tests should render black color content 2`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -1773,7 +1773,7 @@ exports[`Snapshots tests should render black color content 2`] = `
       <button
         aria-controls="downshift-:r6:-menu"
         aria-labelledby="downshift-:r6:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+        class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border black darkening disableType-default size56 component"
         id="downshift-:r6:-input"
         style="background: rgb(255, 69, 195);"
         tabindex="0"
@@ -1790,7 +1790,7 @@ exports[`Snapshots tests should render black color content 2`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -1885,7 +1885,7 @@ exports[`Snapshots tests should render black color content 3`] = `
         <button
           aria-controls="downshift-:ra:-menu"
           aria-labelledby="downshift-:ra:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+          class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border black darkening disableType-default size56 component"
           id="downshift-:ra:-input"
           style="background: rgb(255, 69, 195);"
           tabindex="0"
@@ -1902,7 +1902,7 @@ exports[`Snapshots tests should render black color content 3`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -1937,7 +1937,7 @@ exports[`Snapshots tests should render black color content 3`] = `
       <button
         aria-controls="downshift-:ra:-menu"
         aria-labelledby="downshift-:ra:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+        class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border black darkening disableType-default size56 component"
         id="downshift-:ra:-input"
         style="background: rgb(255, 69, 195);"
         tabindex="0"
@@ -1954,7 +1954,7 @@ exports[`Snapshots tests should render black color content 3`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -2049,7 +2049,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
         <button
           aria-controls="downshift-:r1:-menu"
           aria-labelledby="downshift-:r1:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+          class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border white darkening disableType-default size56 component"
           id="downshift-:r1:-input"
           style="background: rgb(0, 255, 0);"
           tabindex="0"
@@ -2066,7 +2066,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -2101,7 +2101,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
       <button
         aria-controls="downshift-:r1:-menu"
         aria-labelledby="downshift-:r1:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+        class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border white darkening disableType-default size56 component"
         id="downshift-:r1:-input"
         style="background: rgb(0, 255, 0);"
         tabindex="0"
@@ -2118,7 +2118,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -2213,7 +2213,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
         <button
           aria-controls="downshift-:r5:-menu"
           aria-labelledby="downshift-:r5:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+          class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border white darkening disableType-default size56 component"
           id="downshift-:r5:-input"
           style="background: rgb(0, 255, 0);"
           tabindex="0"
@@ -2230,7 +2230,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -2265,7 +2265,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
       <button
         aria-controls="downshift-:r5:-menu"
         aria-labelledby="downshift-:r5:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+        class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border white darkening disableType-default size56 component"
         id="downshift-:r5:-input"
         style="background: rgb(0, 255, 0);"
         tabindex="0"
@@ -2282,7 +2282,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -2377,7 +2377,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
         <button
           aria-controls="downshift-:r9:-menu"
           aria-labelledby="downshift-:r9:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+          class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border white darkening disableType-default size56 component"
           id="downshift-:r9:-input"
           style="background: rgb(0, 255, 0);"
           tabindex="0"
@@ -2394,7 +2394,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -2429,7 +2429,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
       <button
         aria-controls="downshift-:r9:-menu"
         aria-labelledby="downshift-:r9:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+        class="component block component component component size56 hug defaultPaddings defaultWidth minHeight component border white darkening disableType-default size56 component"
         id="downshift-:r9:-input"
         style="background: rgb(0, 255, 0);"
         tabindex="0"
@@ -2446,7 +2446,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
diff --git a/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap b/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap
index b9de21e4a4..d7abe06542 100644
--- a/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap
@@ -49,58 +49,51 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
           </div>
         </div>
         <a
+          aria-disabled="false"
           aria-label="скачать"
-          class="component text size-48 hug size-48 component text component text cc-icon-button download primary component component border_24"
+          class="component cc-icon-button download component primary component component border_24 component"
           download="новое_название_файла"
           href="/link"
         >
           <span
-            class="label stretchText"
+            class="iconWrapper size-24 center"
           >
-            <span
-              class="iconWrapper size-24 center"
+            <svg
+              class="icon"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                class="icon"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M10.963 6.623L8.667 8.87V2H7.333v6.87L5.037 6.622l-.932.954L8 11.387l3.895-3.81-.932-.954zM13.333 14v-1.333H2.667V14h10.666z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M10.963 6.623L8.667 8.87V2H7.333v6.87L5.037 6.622l-.932.954L8 11.387l3.895-3.81-.932-.954zM13.333 14v-1.333H2.667V14h10.666z"
+              />
+            </svg>
           </span>
         </a>
         <button
           aria-label="удалить"
-          class="component text size-48 hug size-48 component text component text cc-icon-button delete primary component component border_24"
+          class="component cc-icon-button delete component primary component component border_24 component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="iconWrapper size-24 center"
           >
-            <span
-              class="iconWrapper size-24 center"
+            <svg
+              class="icon"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                class="icon"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.057 8L4 11l1 1 3-3.057L11 12l1-1-3.057-3L12 5l-1-1-3 3.057L5 4 4 5l3.057 3z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M7.057 8L4 11l1 1 3-3.057L11 12l1-1-3.057-3L12 5l-1-1-3 3.057L5 4 4 5l3.057 3z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -151,58 +144,51 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
         </div>
       </div>
       <a
+        aria-disabled="false"
         aria-label="скачать"
-        class="component text size-48 hug size-48 component text component text cc-icon-button download primary component component border_24"
+        class="component cc-icon-button download component primary component component border_24 component"
         download="новое_название_файла"
         href="/link"
       >
         <span
-          class="label stretchText"
+          class="iconWrapper size-24 center"
         >
-          <span
-            class="iconWrapper size-24 center"
+          <svg
+            class="icon"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              class="icon"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M10.963 6.623L8.667 8.87V2H7.333v6.87L5.037 6.622l-.932.954L8 11.387l3.895-3.81-.932-.954zM13.333 14v-1.333H2.667V14h10.666z"
-              />
-            </svg>
-          </span>
+            <path
+              d="M10.963 6.623L8.667 8.87V2H7.333v6.87L5.037 6.622l-.932.954L8 11.387l3.895-3.81-.932-.954zM13.333 14v-1.333H2.667V14h10.666z"
+            />
+          </svg>
         </span>
       </a>
       <button
         aria-label="удалить"
-        class="component text size-48 hug size-48 component text component text cc-icon-button delete primary component component border_24"
+        class="component cc-icon-button delete component primary component component border_24 component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="iconWrapper size-24 center"
         >
-          <span
-            class="iconWrapper size-24 center"
+          <svg
+            class="icon"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              class="icon"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.057 8L4 11l1 1 3-3.057L11 12l1-1-3.057-3L12 5l-1-1-3 3.057L5 4 4 5l3.057 3z"
-              />
-            </svg>
-          </span>
+            <path
+              d="M7.057 8L4 11l1 1 3-3.057L11 12l1-1-3.057-3L12 5l-1-1-3 3.057L5 4 4 5l3.057 3z"
+            />
+          </svg>
         </span>
       </button>
     </div>
diff --git a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png
index 55c90c17e8..33ff2c237a 100644
--- a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png
+++ b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8e53491bfb3fc6f57e699eb2c415dbcb9f83afb4df39ca93933ba24df1fe97ac
-size 746
+oid sha256:62097e0415d97675a2f7450354d02030659f8f27758cf13087b9c659efd39b6c
+size 666
diff --git a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png
index b6e213019c..47efd91ae2 100644
--- a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png
+++ b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:67d0e1565e1e3c8b6453dfbe05895aee84aae9c28dd30fbc55eab831ab0a6d0b
-size 623
+oid sha256:0fc8bbcebdb89d7e81c629a0d947c3fe8892af7bdc60225f8d0fd5a200ceae17
+size 711
diff --git a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
index 1c39fc51df..f61acf4182 100644
--- a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
@@ -6,42 +6,10 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
   "baseElement": <body>
     <div>
       <a
-        class="component text size-48 hug size-48 component text component text cc-icon-button primary component component border_48"
+        aria-disabled="false"
+        class="component cc-icon-button component primary component component border_48 component"
         data-test-id="test-id"
         href="http://example.com"
-      >
-        <span
-          class="label stretchText"
-        >
-          <span
-            class="iconWrapper size-48 center"
-          >
-            <svg
-              class="icon"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                d="M11.063 3.505c.324-.866 1.55-.866 1.873 0l1.794 4.798a1 1 0 00.893.649l5.118.223c.924.04 1.302 1.206.578 1.782l-4.008 3.189a1 1 0 00-.341 1.05l1.369 4.935c.247.892-.745 1.612-1.516 1.102l-4.271-2.827a1 1 0 00-1.104 0l-4.272 2.827c-.77.51-1.762-.21-1.515-1.102l1.368-4.936a1 1 0 00-.34-1.05l-4.01-3.188c-.723-.576-.344-1.741.58-1.782l5.117-.223a1 1 0 00.893-.65l1.794-4.797z"
-              />
-            </svg>
-          </span>
-        </span>
-      </a>
-    </div>
-  </body>,
-  "container": <div>
-    <a
-      class="component text size-48 hug size-48 component text component text cc-icon-button primary component component border_48"
-      data-test-id="test-id"
-      href="http://example.com"
-    >
-      <span
-        class="label stretchText"
       >
         <span
           class="iconWrapper size-48 center"
@@ -60,6 +28,32 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
             />
           </svg>
         </span>
+      </a>
+    </div>
+  </body>,
+  "container": <div>
+    <a
+      aria-disabled="false"
+      class="component cc-icon-button component primary component component border_48 component"
+      data-test-id="test-id"
+      href="http://example.com"
+    >
+      <span
+        class="iconWrapper size-48 center"
+      >
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M11.063 3.505c.324-.866 1.55-.866 1.873 0l1.794 4.798a1 1 0 00.893.649l5.118.223c.924.04 1.302 1.206.578 1.782l-4.008 3.189a1 1 0 00-.341 1.05l1.369 4.935c.247.892-.745 1.612-1.516 1.102l-4.271-2.827a1 1 0 00-1.104 0l-4.272 2.827c-.77.51-1.762-.21-1.515-1.102l1.368-4.936a1 1 0 00-.34-1.05l-4.01-3.188c-.723-.576-.344-1.741.58-1.782l5.117-.223a1 1 0 00.893-.65l1.794-4.797z"
+          />
+        </svg>
       </span>
     </a>
   </div>,
@@ -123,40 +117,8 @@ exports[`IconButton Snapshots tests should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component text size-48 hug size-48 component text component text cc-icon-button primary component component border_48"
+        class="component cc-icon-button component primary component component border_48 component"
         type="button"
-      >
-        <span
-          class="label stretchText"
-        >
-          <span
-            class="iconWrapper size-48 center"
-          >
-            <svg
-              class="icon"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                d="M11.063 3.505c.324-.866 1.55-.866 1.873 0l1.794 4.798a1 1 0 00.893.649l5.118.223c.924.04 1.302 1.206.578 1.782l-4.008 3.189a1 1 0 00-.341 1.05l1.369 4.935c.247.892-.745 1.612-1.516 1.102l-4.271-2.827a1 1 0 00-1.104 0l-4.272 2.827c-.77.51-1.762-.21-1.515-1.102l1.368-4.936a1 1 0 00-.34-1.05l-4.01-3.188c-.723-.576-.344-1.741.58-1.782l5.117-.223a1 1 0 00.893-.65l1.794-4.797z"
-              />
-            </svg>
-          </span>
-        </span>
-      </button>
-    </div>
-  </body>,
-  "container": <div>
-    <button
-      class="component text size-48 hug size-48 component text component text cc-icon-button primary component component border_48"
-      type="button"
-    >
-      <span
-        class="label stretchText"
       >
         <span
           class="iconWrapper size-48 center"
@@ -175,6 +137,30 @@ exports[`IconButton Snapshots tests should match snapshot 1`] = `
             />
           </svg>
         </span>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="component cc-icon-button component primary component component border_48 component"
+      type="button"
+    >
+      <span
+        class="iconWrapper size-48 center"
+      >
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M11.063 3.505c.324-.866 1.55-.866 1.873 0l1.794 4.798a1 1 0 00.893.649l5.118.223c.924.04 1.302 1.206.578 1.782l-4.008 3.189a1 1 0 00-.341 1.05l1.369 4.935c.247.892-.745 1.612-1.516 1.102l-4.271-2.827a1 1 0 00-1.104 0l-4.272 2.827c-.77.51-1.762-.21-1.515-1.102l1.368-4.936a1 1 0 00-.34-1.05l-4.01-3.188c-.723-.576-.344-1.741.58-1.782l5.117-.223a1 1 0 00.893-.65l1.794-4.797z"
+          />
+        </svg>
       </span>
     </button>
   </div>,
diff --git a/packages/icon-button/src/components/base-icon-button/Component.tsx b/packages/icon-button/src/components/base-icon-button/Component.tsx
index f1e7ae525a..6c73587751 100644
--- a/packages/icon-button/src/components/base-icon-button/Component.tsx
+++ b/packages/icon-button/src/components/base-icon-button/Component.tsx
@@ -1,8 +1,9 @@
 import React, { forwardRef, type ReactElement } from 'react';
 import cn from 'classnames';
 
-import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
-import { ButtonMobile } from '@alfalab/core-components-button/mobile';
+import { BaseButtonCandidate } from '@alfalab/core-components-button/components/base-button-candidate';
+import { ButtonContent } from '@alfalab/core-components-button/components/button-content';
+import { useLoading } from '@alfalab/core-components-button/shared';
 
 import { type IconButtonProps } from '../../types/icon-button-props';
 
@@ -13,14 +14,14 @@ import invertedColors from './inverted.module.css';
 const colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
-};
+} as const;
 
-type BaseIconButtonProps = {
-    client: 'desktop' | 'mobile';
-    clientStyles: Record<string, string>;
-};
-
-export const BaseIconButton = forwardRef<HTMLButtonElement, IconButtonProps & BaseIconButtonProps>(
+export const BaseIconButton = forwardRef<
+    HTMLButtonElement,
+    IconButtonProps & {
+        clientStyles: Record<string, string>;
+    }
+>(
     (
         {
             className,
@@ -30,36 +31,40 @@ export const BaseIconButton = forwardRef<HTMLButtonElement, IconButtonProps & Ba
             colors = 'default',
             alignIcon = 'center',
             transparentBg = false,
-            client,
             clientStyles,
+            loading: loadingFromProps,
             ...restProps
         },
         ref,
     ) => {
-        const Component = client === 'desktop' ? ButtonDesktop : ButtonMobile;
+        const loading = useLoading(loadingFromProps);
 
         return (
-            <Component
+            <BaseButtonCandidate
                 {...restProps}
+                Content={ButtonContent}
                 ref={ref}
-                view='text'
+                disabledClassName={colorStyles[colors].disabled}
+                loading={loading}
+                loaderClassName={styles.loader}
                 className={cn(
                     'cc-icon-button',
                     className,
+                    styles.component,
                     colorStyles[colors][view],
                     colorStyles[colors].component,
                     clientStyles.component,
                     clientStyles[`border_${size}`],
                     {
-                        [colorStyles[colors].loader]: restProps.loading,
+                        [styles.loading]: loading,
+                        [colorStyles[colors].loader]: loading,
                         [colorStyles[colors].transparentBg]: transparentBg,
                     },
                 )}
-                size={48}
             >
                 <span className={cn(styles.iconWrapper, styles[`size-${size}`], styles[alignIcon])}>
                     {React.isValidElement(Icon) ? (
-                        React.cloneElement(Icon as ReactElement<{ className?: string }>, {
+                        React.cloneElement(Icon, {
                             className: cn(
                                 styles.icon,
                                 (Icon as ReactElement<{ className?: string }>).props.className,
@@ -69,7 +74,7 @@ export const BaseIconButton = forwardRef<HTMLButtonElement, IconButtonProps & Ba
                         <Icon className={styles.icon} />
                     )}
                 </span>
-            </Component>
+            </BaseButtonCandidate>
         );
     },
 );
diff --git a/packages/icon-button/src/components/base-icon-button/default.module.css b/packages/icon-button/src/components/base-icon-button/default.module.css
index 231494d1f5..3620310b2c 100644
--- a/packages/icon-button/src/components/base-icon-button/default.module.css
+++ b/packages/icon-button/src/components/base-icon-button/default.module.css
@@ -36,60 +36,70 @@
     &.primary {
         color: var(--icon-button-primary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-primary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-primary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-primary-active-color);
+            &:active {
+                color: var(--icon-button-primary-active-color);
+            }
         }
     }
 
     &.secondary {
         color: var(--icon-button-secondary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-secondary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-secondary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-secondary-active-color);
+            &:active {
+                color: var(--icon-button-secondary-active-color);
+            }
         }
     }
 
     &.transparent {
         color: var(--icon-button-transparent-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-transparent-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-transparent-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-transparent-active-color);
+            &:active {
+                color: var(--icon-button-transparent-active-color);
+            }
         }
     }
 
     &.negative {
         color: var(--icon-button-negative-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-negative-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-negative-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-negative-active-color);
+            &:active {
+                color: var(--icon-button-negative-active-color);
+            }
         }
     }
 
     &.tertiary {
         color: var(--icon-button-tertiary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-tertiary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-tertiary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-tertiary-active-color);
+            &:active {
+                color: var(--icon-button-tertiary-active-color);
+            }
         }
     }
 
@@ -97,87 +107,105 @@
         &.primary {
             color: var(--color-light-text-primary);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-press);
+                &:active {
+                    background: var(--color-light-transparent-default-press);
+                }
             }
         }
 
         &.secondary {
             color: var(--color-light-text-secondary);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-press);
+                &:active {
+                    background: var(--color-light-transparent-default-press);
+                }
             }
         }
 
         &.negative {
             color: var(--color-light-text-negative);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-press);
+                &:active {
+                    background: var(--color-light-transparent-default-press);
+                }
             }
         }
 
         &.tertiary {
             color: var(--color-light-text-tertiary);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-press);
+                &:active {
+                    background: var(--color-light-transparent-default-press);
+                }
             }
         }
     }
 
-    &.component:disabled {
-        &.primary {
-            color: var(--icon-button-primary-disabled-color);
+    &.component {
+        @mixin disabled {
+            &.primary {
+                color: var(--icon-button-primary-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-primary-base-color);
+                &.loader {
+                    color: var(--icon-button-primary-base-color);
+                }
             }
-        }
 
-        &.secondary {
-            color: var(--icon-button-secondary-disabled-color);
+            &.secondary {
+                color: var(--icon-button-secondary-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-secondary-base-color);
+                &.loader {
+                    color: var(--icon-button-secondary-base-color);
+                }
             }
-        }
 
-        &.negative {
-            color: var(--icon-button-negative-disabled-color);
+            &.transparent {
+                color: var(--icon-button-transparent-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-negative-base-color);
+                &.loader {
+                    color: var(--icon-button-transparent-base-color);
+                }
             }
-        }
 
-        &.tertiary {
-            color: var(--icon-button-tertiary-disabled-color);
+            &.negative {
+                color: var(--icon-button-negative-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-tertiary-base-color);
+                &.loader {
+                    color: var(--icon-button-negative-base-color);
+                }
             }
-        }
 
-        &.transparentBg {
-            background: transparent;
+            &.tertiary {
+                color: var(--icon-button-tertiary-disabled-color);
+
+                &.loader {
+                    color: var(--icon-button-tertiary-base-color);
+                }
+            }
+
+            &.transparentBg {
+                background: transparent;
+            }
         }
     }
 }
diff --git a/packages/icon-button/src/components/base-icon-button/index.module.css b/packages/icon-button/src/components/base-icon-button/index.module.css
index 4b997d4782..222e9b6081 100644
--- a/packages/icon-button/src/components/base-icon-button/index.module.css
+++ b/packages/icon-button/src/components/base-icon-button/index.module.css
@@ -1,6 +1,16 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '../../vars.css';
 
+.component {
+    position: relative;
+
+    /* Loading */
+
+    &.loading > *:not(.loader) {
+        opacity: 0;
+    }
+}
+
 .size-24 {
     width: var(--icon-button-xxs-size);
     height: var(--icon-button-xxs-size);
diff --git a/packages/icon-button/src/components/base-icon-button/inverted.module.css b/packages/icon-button/src/components/base-icon-button/inverted.module.css
index 0b6f20d65e..81727ecd37 100644
--- a/packages/icon-button/src/components/base-icon-button/inverted.module.css
+++ b/packages/icon-button/src/components/base-icon-button/inverted.module.css
@@ -66,60 +66,70 @@
     &.primary {
         color: var(--icon-button-inverted-primary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-primary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-primary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-primary-active-color);
+            &:active {
+                color: var(--icon-button-inverted-primary-active-color);
+            }
         }
     }
 
     &.secondary {
         color: var(--icon-button-inverted-secondary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-secondary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-secondary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-secondary-active-color);
+            &:active {
+                color: var(--icon-button-inverted-secondary-active-color);
+            }
         }
     }
 
     &.transparent {
         color: var(--icon-button-inverted-transparent-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-transparent-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-transparent-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-transparent-active-color);
+            &:active {
+                color: var(--icon-button-inverted-transparent-active-color);
+            }
         }
     }
 
     &.negative {
         color: var(--icon-button-inverted-negative-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-negative-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-negative-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-negative-active-color);
+            &:active {
+                color: var(--icon-button-inverted-negative-active-color);
+            }
         }
     }
 
     &.tertiary {
         color: var(--icon-button-inverted-tertiary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-tertiary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-tertiary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-tertiary-active-color);
+            &:active {
+                color: var(--icon-button-inverted-tertiary-active-color);
+            }
         }
     }
 
@@ -127,87 +137,105 @@
         &.primary {
             color: var(--color-light-text-primary-inverted);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-inverted-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-inverted-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-inverted-press);
+                &:active {
+                    background: var(--color-light-transparent-default-inverted-press);
+                }
             }
         }
 
         &.secondary {
             color: var(--color-light-text-secondary-inverted);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-inverted-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-inverted-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-inverted-press);
+                &:active {
+                    background: var(--color-light-transparent-default-inverted-press);
+                }
             }
         }
 
         &.negative {
             color: var(--color-light-text-negative-inverted);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-inverted-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-inverted-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-inverted-press);
+                &:active {
+                    background: var(--color-light-transparent-default-inverted-press);
+                }
             }
         }
 
         &.tertiary {
             color: var(--color-light-text-tertiary-inverted);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-inverted-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-inverted-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-inverted-press);
+                &:active {
+                    background: var(--color-light-transparent-default-inverted-press);
+                }
             }
         }
     }
 
-    &.component:disabled {
-        &.primary {
-            color: var(--icon-button-inverted-primary-disabled-color);
+    &.component {
+        @mixin disabled {
+            &.primary {
+                color: var(--icon-button-inverted-primary-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-inverted-primary-base-color);
+                &.loader {
+                    color: var(--icon-button-inverted-primary-base-color);
+                }
             }
-        }
 
-        &.secondary {
-            color: var(--icon-button-inverted-secondary-disabled-color);
+            &.secondary {
+                color: var(--icon-button-inverted-secondary-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-inverted-secondary-base-color);
+                &.loader {
+                    color: var(--icon-button-inverted-secondary-base-color);
+                }
             }
-        }
 
-        &.negative {
-            color: var(--icon-button-inverted-negative-disabled-color);
+            &.transparent {
+                color: var(--icon-button-inverted-transparent-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-inverted-negative-base-color);
+                &.loader {
+                    color: var(--icon-button-inverted-transparent-base-color);
+                }
             }
-        }
 
-        &.tertiary {
-            color: var(--icon-button-inverted-tertiary-disabled-color);
+            &.negative {
+                color: var(--icon-button-inverted-negative-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-inverted-tertiary-base-color);
+                &.loader {
+                    color: var(--icon-button-inverted-negative-base-color);
+                }
             }
-        }
 
-        &.transparentBg {
-            background: transparent;
+            &.tertiary {
+                color: var(--icon-button-inverted-tertiary-disabled-color);
+
+                &.loader {
+                    color: var(--icon-button-inverted-tertiary-base-color);
+                }
+            }
+
+            &.transparentBg {
+                background: transparent;
+            }
         }
     }
 }
diff --git a/packages/icon-button/src/desktop/Component.desktop.tsx b/packages/icon-button/src/desktop/Component.desktop.tsx
index 0a3a29e900..a30cef0621 100644
--- a/packages/icon-button/src/desktop/Component.desktop.tsx
+++ b/packages/icon-button/src/desktop/Component.desktop.tsx
@@ -8,9 +8,7 @@ import clientStyles from './desktop.module.css';
 export type IconButtonDesktopProps = IconButtonProps;
 
 export const IconButtonDesktop = forwardRef<HTMLButtonElement, IconButtonDesktopProps>(
-    (props, ref) => (
-        <BaseIconButton {...props} ref={ref} client='desktop' clientStyles={clientStyles} />
-    ),
+    (props, ref) => <BaseIconButton {...props} ref={ref} clientStyles={clientStyles} />,
 );
 
 IconButtonDesktop.displayName = 'IconButtonDesktop';
diff --git a/packages/icon-button/src/mobile/Component.mobile.tsx b/packages/icon-button/src/mobile/Component.mobile.tsx
index eee2df61c5..9dcb03211c 100644
--- a/packages/icon-button/src/mobile/Component.mobile.tsx
+++ b/packages/icon-button/src/mobile/Component.mobile.tsx
@@ -8,9 +8,7 @@ import clientStyles from './mobile.module.css';
 export type IconButtonMobileProps = IconButtonProps;
 
 export const IconButtonMobile = forwardRef<HTMLButtonElement, IconButtonMobileProps>(
-    (props, ref) => (
-        <BaseIconButton {...props} ref={ref} client='mobile' clientStyles={clientStyles} />
-    ),
+    (props, ref) => <BaseIconButton {...props} ref={ref} clientStyles={clientStyles} />,
 );
 
 IconButtonMobile.displayName = 'IconButtonMobile';
diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
index 4eb0d91878..baeda5d718 100644
--- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
@@ -145,29 +145,25 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                             >
                               <button
                                 aria-label="закрыть"
-                                class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                                class="component cc-icon-button button button mobile component primary component component border_32 component"
                                 type="button"
                               >
                                 <span
-                                  class="label stretchText"
+                                  class="iconWrapper size-32 center"
                                 >
-                                  <span
-                                    class="iconWrapper size-32 center"
+                                  <svg
+                                    class="icon"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="24"
+                                    role="img"
+                                    viewBox="0 0 24 24"
+                                    width="24"
                                   >
-                                    <svg
-                                      class="icon"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height="24"
-                                      role="img"
-                                      viewBox="0 0 24 24"
-                                      width="24"
-                                    >
-                                      <path
-                                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                                      />
-                                    </svg>
-                                  </span>
+                                    <path
+                                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                                    />
+                                  </svg>
                                 </span>
                               </button>
                             </div>
@@ -293,21 +289,21 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                               tabindex="0"
                             >
                               <button
-                                class="component secondary size-56 hug size-56 component secondary component secondary button"
+                                class="component component component component component size56 hug defaultPaddings defaultWidth minHeight secondary secondary secondary size56 button component"
                                 type="button"
                               >
                                 <span
-                                  class="label stretchText"
+                                  class="label"
                                 >
                                   Отмена
                                 </span>
                               </button>
                               <button
-                                class="component primary size-56 hug size-56 component primary component primary button"
+                                class="component component component component component size56 hug defaultPaddings defaultWidth minHeight primary primary primary size56 button component"
                                 type="button"
                               >
                                 <span
-                                  class="label stretchText"
+                                  class="label"
                                 >
                                   Продолжить
                                 </span>
diff --git a/packages/modal/src/__snapshots__/Component.test.tsx.snap b/packages/modal/src/__snapshots__/Component.test.tsx.snap
index dc83e6cb57..20872dc31c 100644
--- a/packages/modal/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/modal/src/__snapshots__/Component.test.tsx.snap
@@ -27,11 +27,11 @@ exports[`ModalDesktop snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="назад"
-                class="component text size-48 hug size-48 component text component text component component"
+                class="component component component component component size48 hug text text text size48 component component component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <div
                     class="flex"
@@ -74,29 +74,25 @@ exports[`ModalDesktop snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="закрыть"
-                  class="component text size-48 hug size-48 component text component text cc-icon-button button button primary component component border_48"
+                  class="component cc-icon-button button button component primary component component border_48 component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="iconWrapper size-48 center"
                   >
-                    <span
-                      class="iconWrapper size-48 center"
+                    <svg
+                      class="icon"
+                      fill="currentColor"
+                      focusable="false"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
                     >
-                      <svg
-                        class="icon"
-                        fill="currentColor"
-                        focusable="false"
-                        height="24"
-                        role="img"
-                        viewBox="0 0 24 24"
-                        width="24"
-                      >
-                        <path
-                          d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
-                        />
-                      </svg>
-                    </span>
+                      <path
+                        d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
+                      />
+                    </svg>
                   </span>
                 </button>
               </div>
@@ -165,11 +161,11 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="назад"
-                class="component text size-32 hug size-32 component text component text component component mobileComponent"
+                class="component component component component component size32 hug text text text size32 component component mobileComponent component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <div
                     class="flex"
@@ -212,29 +208,25 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="закрыть"
-                  class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                  class="component cc-icon-button button button mobile component primary component component border_32 component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="iconWrapper size-32 center"
                   >
-                    <span
-                      class="iconWrapper size-32 center"
+                    <svg
+                      class="icon"
+                      fill="currentColor"
+                      focusable="false"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
                     >
-                      <svg
-                        class="icon"
-                        fill="currentColor"
-                        focusable="false"
-                        height="24"
-                        role="img"
-                        viewBox="0 0 24 24"
-                        width="24"
-                      >
-                        <path
-                          d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                        />
-                      </svg>
-                    </span>
+                      <path
+                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                      />
+                    </svg>
                   </span>
                 </button>
               </div>
diff --git a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
index 4367b86fee..f129d7594b 100644
--- a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = `
           >
             <button
               aria-label="назад"
-              class="component text size-48 hug size-48 component text component text component component"
+              class="component component component component component size48 hug text text text size48 component component component"
               data-test-id="navigation-bar-dti-back-button"
               type="button"
             >
               <span
-                class="label stretchText"
+                class="label"
               >
                 <div
                   class="flex"
@@ -66,30 +66,26 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component text size-48 hug size-48 component text component text cc-icon-button button button primary component component border_48"
+                class="component cc-icon-button button button component primary component component border_48 component"
                 data-test-id="navigation-bar-dti-closer"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="iconWrapper size-48 center"
                 >
-                  <span
-                    class="iconWrapper size-48 center"
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
diff --git a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
index 9e58de515f..a0232741ef 100644
--- a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
+++ b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
@@ -57,29 +57,25 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component text size-48 hug size-48 component text component text cc-icon-button closeButton closeButton primary component component border_48"
+                class="component cc-icon-button closeButton closeButton component primary component component border_48 component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="iconWrapper size-48 center"
                 >
-                  <span
-                    class="iconWrapper size-48 center"
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -120,29 +116,25 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component text size-48 hug size-48 component text component text cc-icon-button closeButton closeButton primary component component border_48"
+                class="component cc-icon-button closeButton closeButton component primary component component border_48 component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="iconWrapper size-48 center"
                 >
-                  <span
-                    class="iconWrapper size-48 center"
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -183,29 +175,25 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component text size-48 hug size-48 component text component text cc-icon-button closeButton closeButton primary component component border_48"
+                class="component cc-icon-button closeButton closeButton component primary component component border_48 component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="iconWrapper size-48 center"
                 >
-                  <span
-                    class="iconWrapper size-48 center"
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap
index 5e4d2859a7..35ee8baeab 100644
--- a/packages/notification/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/notification/src/__snapshots__/Component.test.tsx.snap
@@ -67,29 +67,25 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
           >
             <button
               aria-label="закрыть"
-              class="component text size-48 hug size-48 component text component text cc-icon-button closeButton closeButton primary component component border_48"
+              class="component cc-icon-button closeButton closeButton component primary component component border_48 component"
               type="button"
             >
               <span
-                class="label stretchText"
+                class="iconWrapper size-48 center"
               >
-                <span
-                  class="iconWrapper size-48 center"
+                <svg
+                  class="icon"
+                  fill="currentColor"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
                 >
-                  <svg
-                    class="icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="24"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="24"
-                  >
-                    <path
-                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                    />
-                  </svg>
-                </span>
+                  <path
+                    d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                  />
+                </svg>
               </span>
             </button>
           </div>
diff --git a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
index f2b2194062..eccff4798d 100644
--- a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
@@ -35,143 +35,67 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
     <div
       class="component"
     >
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            1
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        1
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            2
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        2
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            3
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        3
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            4
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        4
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            5
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        5
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            6
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        6
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            7
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        7
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            8
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        8
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            9
-          </span>
-        </button>
-      </div>
+        9
+      </button>
       <div />
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
-          type="button"
-        >
-          0
-        </button>
-      </div>
+        0
+      </button>
       <div />
     </div>
   </div>
@@ -202,173 +126,89 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
     <div
       class="component"
     >
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            1
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        1
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            2
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        2
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            3
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        3
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            4
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        4
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            5
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        5
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            6
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        6
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            7
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        7
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            8
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        8
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            9
-          </span>
-        </button>
-      </div>
+        9
+      </button>
       <div />
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
-          type="button"
-        >
-          0
-        </button>
-      </div>
-      <div
-        class="component"
+        0
+      </button>
+      <button
+        class="component component text component"
+        type="button"
       >
-        <button
-          class="component text size-56 hug size-56 component text component text button text"
-          type="button"
+        <svg
+          fill="currentColor"
+          focusable="false"
+          height="48"
+          role="img"
+          viewBox="0 0 48 48"
+          width="48"
         >
-          <span
-            class="label stretchText"
-          >
-            <svg
-              fill="currentColor"
-              focusable="false"
-              height="48"
-              role="img"
-              viewBox="0 0 48 48"
-              width="48"
-            >
-              <path
-                d="M27 22.221l-4.007-4.007-1.765 1.832 3.991 3.962-3.994 3.963 1.77 1.81L27 25.777l4.004 4.004 1.771-1.81-3.996-3.965L32.778 20 31 18.22l-4 4z"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M19.922 11.45a2.99 2.99 0 00-2.132.888l-9.457 9.519a3.022 3.022 0 00-.883 2.142c0 .808.314 1.57.881 2.141l9.46 9.52a2.99 2.99 0 002.131.89H36c2.61 0 4.55-1.922 4.55-4.55V16c0-2.63-1.94-4.55-4.55-4.55H19.922zm-.642 2.368a.889.889 0 01.642-.269H36c.749 0 1.355.26 1.772.678.417.416.678 1.022.678 1.772v16c0 .75-.26 1.356-.678 1.773-.417.417-1.023.677-1.772.677H19.922a.89.89 0 01-.642-.268L9.82 24.66a.921.921 0 01-.27-.662c0-.254.094-.484.272-.662l9.457-9.52z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
+          <path
+            d="M27 22.221l-4.007-4.007-1.765 1.832 3.991 3.962-3.994 3.963 1.77 1.81L27 25.777l4.004 4.004 1.771-1.81-3.996-3.965L32.778 20 31 18.22l-4 4z"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M19.922 11.45a2.99 2.99 0 00-2.132.888l-9.457 9.519a3.022 3.022 0 00-.883 2.142c0 .808.314 1.57.881 2.141l9.46 9.52a2.99 2.99 0 002.131.89H36c2.61 0 4.55-1.922 4.55-4.55V16c0-2.63-1.94-4.55-4.55-4.55H19.922zm-.642 2.368a.889.889 0 01.642-.269H36c.749 0 1.355.26 1.772.678.417.416.678 1.022.678 1.772v16c0 .75-.26 1.356-.678 1.773-.417.417-1.023.677-1.772.677H19.922a.89.89 0 01-.642-.268L9.82 24.66a.921.921 0 01-.27-.662c0-.254.094-.484.272-.662l9.457-9.52z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
     </div>
   </div>
 </div>
@@ -396,143 +236,67 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
     <div
       class="component"
     >
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            1
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        1
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            2
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        2
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            3
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        3
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            4
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        4
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            5
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        5
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            6
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        6
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            7
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        7
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            8
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        8
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            9
-          </span>
-        </button>
-      </div>
+        9
+      </button>
       <div />
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
-          type="button"
-        >
-          0
-        </button>
-      </div>
+        0
+      </button>
       <div />
     </div>
   </div>
diff --git a/packages/pass-code-v1/src/component.test.tsx b/packages/pass-code-v1/src/component.test.tsx
index 697ce3c939..ce3f89adc7 100644
--- a/packages/pass-code-v1/src/component.test.tsx
+++ b/packages/pass-code-v1/src/component.test.tsx
@@ -39,7 +39,7 @@ describe('PassCodeV1', () => {
 
             const { getByText } = render(<PassCodeV1 value={currentValue} onChange={cb} />);
 
-            const button = getByText(pressedDigit).parentNode as HTMLButtonElement;
+            const button = getByText(pressedDigit) as HTMLButtonElement;
 
             fireEvent.click(button);
 
diff --git a/packages/pass-code-v1/src/components/KeyPad/Component.tsx b/packages/pass-code-v1/src/components/KeyPad/Component.tsx
index 3f0a5c6c3b..cbd8c5f5a5 100644
--- a/packages/pass-code-v1/src/components/KeyPad/Component.tsx
+++ b/packages/pass-code-v1/src/components/KeyPad/Component.tsx
@@ -81,10 +81,14 @@ export const KeyPad: React.FC<KeyPadProps> = ({
                 return <div key='right-addon-empty' />;
             }
 
+            const handleDigitClick = () => {
+                onClick(digit);
+            };
+
             return (
                 <KeyPadButton
                     key={digit}
-                    onClick={onClick}
+                    onClick={handleDigitClick}
                     view='secondary'
                     buttonClassName={styles.digit}
                     dataTestId={getDataTestId(dataTestId, 'keypad-button')}
diff --git a/packages/pass-code-v1/src/components/KeyPadButton/Component.tsx b/packages/pass-code-v1/src/components/KeyPadButton/Component.tsx
index a1f669a6f5..5979ddd859 100644
--- a/packages/pass-code-v1/src/components/KeyPadButton/Component.tsx
+++ b/packages/pass-code-v1/src/components/KeyPadButton/Component.tsx
@@ -1,20 +1,20 @@
-import React, { type ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 import cn from 'classnames';
 
-import { ButtonMobile, type ButtonMobileProps } from '@alfalab/core-components-button/mobile';
+import { BaseButtonCandidate } from '@alfalab/core-components-button/components/base-button-candidate';
 
 import styles from './index.module.css';
 
-export type KeyPadButtonProps<T> = {
+export type KeyPadButtonProps = {
     /**
      * Вид кнопки.
      */
-    view: ButtonMobileProps['view'];
+    view: 'secondary' | 'text';
 
     /**
      * Значение.
      */
-    children: T;
+    children?: ReactNode;
 
     /**
      * Дополнительный класс.
@@ -29,7 +29,7 @@ export type KeyPadButtonProps<T> = {
     /**
      * Коллбэк нажатия на кнопку.
      */
-    onClick?: (payload: T) => void;
+    onClick?: () => void;
 
     /**
      * Идентификатор для систем автоматизированного тестирования.
@@ -37,24 +37,18 @@ export type KeyPadButtonProps<T> = {
     dataTestId?: string;
 };
 
-export function KeyPadButton<T extends ReactNode>({
-    children,
-    onClick,
-    className,
+export const KeyPadButton: FC<KeyPadButtonProps> = ({
     view = 'secondary',
     buttonClassName,
+    children,
     dataTestId,
-}: KeyPadButtonProps<T>) {
-    return (
-        <div className={cn(styles.component, className)}>
-            <ButtonMobile
-                className={cn(styles.button, styles[view], buttonClassName)}
-                view={view}
-                onClick={() => onClick?.(children)}
-                dataTestId={dataTestId}
-            >
-                {children}
-            </ButtonMobile>
-        </div>
-    );
-}
+    onClick,
+}) => (
+    <BaseButtonCandidate
+        className={cn(styles.component, styles[view], buttonClassName)}
+        onClick={onClick}
+        dataTestId={dataTestId}
+    >
+        {children}
+    </BaseButtonCandidate>
+);
diff --git a/packages/pass-code-v1/src/components/KeyPadButton/index.module.css b/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
index 60277952b2..57c7c16ea9 100644
--- a/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
+++ b/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
@@ -2,67 +2,40 @@
 @import '../../vars.css';
 
 .component {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: var(--gap-0);
-}
-
-.button.button {
     @mixin action_component_secondary;
 
     border-radius: var(--border-radius-circle);
-    padding: var(--gap-0);
-    min-width: 64px;
     width: 64px;
     height: 64px;
-    text-align: center;
-
-    & > span {
-        vertical-align: middle;
 
-        & > * {
-            vertical-align: middle;
-        }
-    }
-}
-
-.secondary.secondary {
+    justify-content: center;
+    align-items: center;
     color: var(--color-light-text-primary);
-    background: var(--button-bg-color);
 
-    &:hover {
-        color: var(--color-light-text-primary);
-    }
+    &.secondary {
+        background: var(--button-bg-color);
 
-    &:active {
-        background: var(--button-bg-color-active);
+        &:active {
+            background: var(--button-bg-color-active);
+        }
     }
-}
-
-.ghost.ghost {
-    color: var(--color-light-text-primary);
 
-    &:hover {
-        color: var(--color-light-text-primary);
-    }
+    &.text {
+        @mixin hover {
+            color: var(--color-light-text-primary-hover);
+        }
 
-    &:active {
-        background: var(--button-bg-color-active);
+        &:active {
+            color: var(--color-light-text-primary-press);
+        }
     }
-}
 
-@media screen and (min-width: 360px) {
-    .button.button {
-        min-width: 76px;
+    @media screen and (min-width: 360px) {
         height: 76px;
         width: 76px;
     }
-}
 
-@media screen and (min-width: 390px) {
-    .button.button {
-        min-width: 86px;
+    @media screen and (min-width: 390px) {
         width: 86px;
         height: 86px;
     }
diff --git a/packages/pass-code/src/__snapshots__/component.test.tsx.snap b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
index 0fdc1d4e03..800ae4abd7 100644
--- a/packages/pass-code/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
@@ -53,98 +53,62 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
       class="component"
     >
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          1
-        </span>
+        1
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          2
-        </span>
+        2
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          3
-        </span>
+        3
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          4
-        </span>
+        4
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          5
-        </span>
+        5
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          6
-        </span>
+        6
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          7
-        </span>
+        7
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          8
-        </span>
+        8
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          9
-        </span>
+        9
       </button>
       <div />
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
+        class="component component digit component"
         type="button"
       >
         0
@@ -179,98 +143,62 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
       class="component"
     >
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          1
-        </span>
+        1
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          2
-        </span>
+        2
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          3
-        </span>
+        3
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          4
-        </span>
+        4
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          5
-        </span>
+        5
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          6
-        </span>
+        6
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          7
-        </span>
+        7
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          8
-        </span>
+        8
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          9
-        </span>
+        9
       </button>
       <div />
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
+        class="component component digit component"
         type="button"
       >
         0
diff --git a/packages/pass-code/src/component.test.tsx b/packages/pass-code/src/component.test.tsx
index 94ad123caf..359d07bb7e 100644
--- a/packages/pass-code/src/component.test.tsx
+++ b/packages/pass-code/src/component.test.tsx
@@ -45,7 +45,7 @@ describe('PassCode', () => {
 
             const { getByText } = render(<PassCode value={currentValue} onChange={cb} />);
 
-            const button = getByText(pressedDigit).parentNode as HTMLButtonElement;
+            const button = getByText(pressedDigit) as HTMLButtonElement;
 
             fireEvent.click(button);
 
diff --git a/packages/pass-code/src/components/KeyPad/Component.tsx b/packages/pass-code/src/components/KeyPad/Component.tsx
index 3f8cbc41fd..f35dda2d64 100644
--- a/packages/pass-code/src/components/KeyPad/Component.tsx
+++ b/packages/pass-code/src/components/KeyPad/Component.tsx
@@ -74,9 +74,8 @@ export const KeyPad: React.FC<KeyPadProps> = ({
                         <KeyPadButton
                             key='clear-btn'
                             onClick={onClear}
-                            view='text'
                             dataTestId={getDataTestId(dataTestId, 'backspace-button')}
-                            title='Удалить последний символ'
+                            aria-label='Удалить последний символ'
                         >
                             <BackspaceXxlIcon />
                         </KeyPadButton>
@@ -98,11 +97,14 @@ export const KeyPad: React.FC<KeyPadProps> = ({
                 return <div key='right-addon-empty' />;
             }
 
+            const handleDigitClick = () => {
+                onClick(digit);
+            };
+
             return (
                 <KeyPadButton
                     key={digit}
-                    onClick={onClick}
-                    view='secondary'
+                    onClick={handleDigitClick}
                     buttonClassName={styles.digit}
                     dataTestId={getDataTestId(dataTestId, 'keypad-button')}
                 >
diff --git a/packages/pass-code/src/components/KeyPadButton/Component.tsx b/packages/pass-code/src/components/KeyPadButton/Component.tsx
index 88d080f6b1..7b1a4f34b0 100644
--- a/packages/pass-code/src/components/KeyPadButton/Component.tsx
+++ b/packages/pass-code/src/components/KeyPadButton/Component.tsx
@@ -1,64 +1,48 @@
-import React, { type ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 import cn from 'classnames';
 
-import { ButtonMobile, type ButtonMobileProps } from '@alfalab/core-components-button/mobile';
+import { BaseButtonCandidate } from '@alfalab/core-components-button/components/base-button-candidate';
 
 import styles from './index.module.css';
 
-export type KeyPadButtonProps<T> = {
+export interface KeyPadButtonProps {
     /**
-     * Вид кнопки
+     * Значение.
      */
-    view: ButtonMobileProps['view'];
+    children?: ReactNode;
 
     /**
-     * Значение
-     */
-    children: T;
-
-    /**
-     * Дополнительный класс
+     * Дополнительный класс.
      */
     className?: string;
 
     /**
-     * Дополнительный класс кнопки
+     * Дополнительный класс кнопки.
      */
     buttonClassName?: string;
 
     /**
-     * Коллбэк нажатия на кнопку
+     * Коллбэк нажатия на кнопку.
      */
-    onClick?: (payload: T) => void;
+    onClick?: () => void;
 
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
      */
     dataTestId?: string;
+}
 
-    /**
-     * Заголовок кнопки
-     */
-    title?: string;
-};
-
-export function KeyPadButton<T extends ReactNode>({
-    children,
-    onClick,
-    view = 'secondary',
+export const KeyPadButton: FC<KeyPadButtonProps> = ({
     buttonClassName,
+    children,
     dataTestId,
-    title,
-}: KeyPadButtonProps<T>) {
-    return (
-        <ButtonMobile
-            className={cn(styles.button, styles[view], buttonClassName)}
-            view={view}
-            onClick={() => onClick?.(children)}
-            dataTestId={dataTestId}
-            {...(title && { title })}
-        >
-            {children}
-        </ButtonMobile>
-    );
-}
+    onClick,
+}) => (
+    <BaseButtonCandidate
+        className={cn(styles.component, buttonClassName)}
+        onClick={onClick}
+        dataTestId={dataTestId}
+    >
+        {children}
+    </BaseButtonCandidate>
+);
diff --git a/packages/pass-code/src/components/KeyPadButton/index.module.css b/packages/pass-code/src/components/KeyPadButton/index.module.css
index 5db8662c3e..d2adc43d10 100644
--- a/packages/pass-code/src/components/KeyPadButton/index.module.css
+++ b/packages/pass-code/src/components/KeyPadButton/index.module.css
@@ -1,35 +1,20 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '../../vars.css';
 
-.button.button {
+.component {
     @mixin action_component_secondary;
 
     border-radius: var(--border-radius-circle);
-    padding: var(--gap-0);
-    min-width: var(--pass-code-button-min-width);
     width: var(--pass-code-button-width);
     height: var(--pass-code-button-height);
 
-    text-align: center;
-
-    & > span {
-        vertical-align: middle;
-
-        & > * {
-            vertical-align: middle;
-        }
-    }
-}
-
-.secondary.secondary,
-.button.button {
+    justify-content: center;
+    align-items: center;
     color: var(--color-light-text-primary);
-    background-color: var(--color-light-transparent-default);
+    background: var(--color-light-transparent-default);
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--color-light-transparent-default-hover);
-        }
+    @mixin hover {
+        background-color: var(--color-light-transparent-default-hover);
     }
 
     &:active {
diff --git a/packages/pass-code/src/docs/Component.stories.tsx b/packages/pass-code/src/docs/Component.stories.tsx
index 385b8bee03..bbd72d53ab 100644
--- a/packages/pass-code/src/docs/Component.stories.tsx
+++ b/packages/pass-code/src/docs/Component.stories.tsx
@@ -38,14 +38,12 @@ export const pass_code: Story = {
                         disabled={boolean('disabled', false)}
                         leftAddons={
                             boolean('leftAddons', false) && (
-                                <KeyPadButton view='text' key='left-addon'>
-                                    Забыли код?
-                                </KeyPadButton>
+                                <KeyPadButton key='left-addon'>Забыли код?</KeyPadButton>
                             )
                         }
                         rightAddons={
                             boolean('rightAddons', false) && (
-                                <KeyPadButton view='text' key='right-addon'>
+                                <KeyPadButton key='right-addon'>
                                     <SfFaceIdXxlIcon />
                                 </KeyPadButton>
                             )
diff --git a/packages/pass-code/src/docs/description.mdx b/packages/pass-code/src/docs/description.mdx
index fffa676749..f47a30ac4f 100644
--- a/packages/pass-code/src/docs/description.mdx
+++ b/packages/pass-code/src/docs/description.mdx
@@ -215,13 +215,9 @@ render(() => {
                         onChange={handleChange}
                         error={error}
                         success={isSuccess}
-                        leftAddons={
-                            <KeyPadButton view='text' key='left-addon'>
-                                Забыли код?
-                            </KeyPadButton>
-                        }
+                        leftAddons={<KeyPadButton key='left-addon'>Забыли код?</KeyPadButton>}
                         rightAddons={
-                            <KeyPadButton view='text' key='right-addon'>
+                            <KeyPadButton key='right-addon'>
                                 <SfFaceIdXxlIcon />
                             </KeyPadButton>
                         }
@@ -272,13 +268,9 @@ render(() => {
                 onChange={handleChange}
                 error={error}
                 success={isSuccess}
-                leftAddons={
-                    <KeyPadButton view='text' key='left-addon'>
-                        Забыли код?
-                    </KeyPadButton>
-                }
+                leftAddons={<KeyPadButton key='left-addon'>Забыли код?</KeyPadButton>}
                 rightAddons={
-                    <KeyPadButton view='text' key='right-addon'>
+                    <KeyPadButton key='right-addon'>
                         <SfFaceIdXxlIcon />
                     </KeyPadButton>
                 }
diff --git a/packages/password-input/src/__snapshots__/component.test.tsx.snap b/packages/password-input/src/__snapshots__/component.test.tsx.snap
index 3c73293a09..3f4caf118e 100644
--- a/packages/password-input/src/__snapshots__/component.test.tsx.snap
+++ b/packages/password-input/src/__snapshots__/component.test.tsx.snap
@@ -26,35 +26,31 @@ exports[`PasswordInput snapshots tests should match snapshot 1`] = `
           class="addons rightAddons rightAddons size-48"
         >
           <button
-            class="component text size-48 hug size-48 component text component text cc-icon-button eye secondary component component border_24"
+            class="component cc-icon-button eye component secondary component component border_24 component"
             title="Показать"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="iconWrapper size-24 center"
             >
-              <span
-                class="iconWrapper size-24 center"
+              <svg
+                class="icon"
+                fill="currentColor"
+                focusable="false"
+                height="24"
+                role="img"
+                viewBox="0 0 24 24"
+                width="24"
               >
-                <svg
-                  class="icon"
-                  fill="currentColor"
-                  focusable="false"
-                  height="24"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width="24"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M22.015 18.584L5.432 2 4.018 3.413l2.78 2.78C4.252 7.412 2.177 9.484 1 12.003c1.914 4.09 6.19 7.002 11 7.002 2.164 0 4.22-.589 6.001-1.61l2.6 2.601 1.414-1.413zm-6.756-3.93l-1.573-1.573a2 2 0 11-2.763-2.763L9.35 8.745a4.2 4.2 0 105.91 5.91z"
-                    fill-rule="evenodd"
-                  />
-                  <path
-                    d="M23 12.004a11.952 11.952 0 01-1.813 2.778.1.1 0 01-.145.005L11.438 5.18a.098.098 0 01.065-.169c.165-.007.33-.01.497-.01 4.81 0 9.086 2.912 11 7.002z"
-                  />
-                </svg>
-              </span>
+                <path
+                  clip-rule="evenodd"
+                  d="M22.015 18.584L5.432 2 4.018 3.413l2.78 2.78C4.252 7.412 2.177 9.484 1 12.003c1.914 4.09 6.19 7.002 11 7.002 2.164 0 4.22-.589 6.001-1.61l2.6 2.601 1.414-1.413zm-6.756-3.93l-1.573-1.573a2 2 0 11-2.763-2.763L9.35 8.745a4.2 4.2 0 105.91 5.91z"
+                  fill-rule="evenodd"
+                />
+                <path
+                  d="M23 12.004a11.952 11.952 0 01-1.813 2.778.1.1 0 01-.145.005L11.438 5.18a.098.098 0 01.065-.169c.165-.007.33-.01.497-.01 4.81 0 9.086 2.912 11 7.002z"
+                />
+              </svg>
             </span>
           </button>
         </div>
diff --git a/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap b/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap
index 630991db6c..d92d76a7ad 100644
--- a/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`PatternLockV1 test Snapshot tests should match snapshot 1`] = `
       class="message"
     />
     <div
-      class="forgotBtn forgotBtn hiddenBtn"
+      class="forgotBtnContainer forgotBtnContainer hiddenBtn"
     />
   </div>
 </div>
@@ -26,7 +26,7 @@ exports[`PatternLockV1 test Snapshot tests should match snapshot with error prop
       Error message
     </div>
     <div
-      class="forgotBtn forgotBtn hiddenBtn"
+      class="forgotBtnContainer forgotBtnContainer hiddenBtn"
     />
   </div>
 </div>
diff --git a/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx b/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx
index ca07026e6e..b7830a5299 100644
--- a/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx
+++ b/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx
@@ -126,23 +126,24 @@ export const BasePatternLock = forwardRef<
                     extraBounds={extraBounds}
                     hover={hover}
                 />
-
-                {showForgotCodeBtn ? (
-                    <ButtonMobile
-                        view='transparent'
-                        className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
-                        onClick={onForgotBtnClick}
-                        dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
-                    >
-                        {forgotCodeBtnText}
-                    </ButtonMobile>
-                ) : (
-                    <div
-                        className={cn(commonStyles.forgotBtn, styles.forgotBtn, {
-                            [styles.hiddenBtn]: Boolean(styles.hiddenBtn),
-                        })}
-                    />
-                )}
+                <div
+                    className={cn(
+                        commonStyles.forgotBtnContainer,
+                        styles.forgotBtnContainer,
+                        styles.hiddenBtn,
+                    )}
+                >
+                    {showForgotCodeBtn && (
+                        <ButtonMobile
+                            view='transparent'
+                            className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
+                            onClick={onForgotBtnClick}
+                            dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
+                        >
+                            {forgotCodeBtnText}
+                        </ButtonMobile>
+                    )}
+                </div>
             </div>
         );
     },
diff --git a/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css b/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css
index a9b297ba41..e02b49b74d 100644
--- a/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css
+++ b/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css
@@ -28,7 +28,12 @@
     color: var(--color-light-text-negative);
 }
 
-.forgotBtn {
-    display: block;
+.forgotBtnContainer {
+    display: flex;
+    justify-content: center;
+}
+
+.forgotBtnContainer,
+.forgotBtn.forgotBtn.forgotBtn {
     min-height: var(--size-xs-height);
 }
diff --git a/packages/pattern-lock-v1/src/desktop/desktop.module.css b/packages/pattern-lock-v1/src/desktop/desktop.module.css
index f9a14de1e5..d580c66f7e 100644
--- a/packages/pattern-lock-v1/src/desktop/desktop.module.css
+++ b/packages/pattern-lock-v1/src/desktop/desktop.module.css
@@ -6,7 +6,7 @@
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
 }
 
-.forgotBtn {
+.forgotBtnContainer {
     margin: var(--gap-24) auto var(--gap-0);
 }
 
diff --git a/packages/pattern-lock-v1/src/mobile/mobile.module.css b/packages/pattern-lock-v1/src/mobile/mobile.module.css
index 771c91fc56..9caaaa80e1 100644
--- a/packages/pattern-lock-v1/src/mobile/mobile.module.css
+++ b/packages/pattern-lock-v1/src/mobile/mobile.module.css
@@ -6,13 +6,16 @@
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
 }
 
-.forgotBtn {
+.forgotBtnContainer {
     margin: var(--gap-24) auto var(--gap-0);
 }
 
 @media screen and (min-width: 360px) {
-    .forgotBtn {
+    .forgotBtnContainer {
         margin-top: var(--gap-32);
+    }
+    .forgotBtnContainer,
+    .forgotBtn.forgotBtn.forgotBtn {
         min-height: var(--size-s-height);
     }
 
@@ -22,7 +25,8 @@
 }
 
 @media screen and (min-width: 390px) {
-    .forgotBtn {
+    .forgotBtnContainer,
+    .forgotBtn.forgotBtn.forgotBtn {
         min-height: var(--size-m-height);
     }
 
diff --git a/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png b/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png
index 678ec1c6d2..dc230a1366 100644
--- a/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png
+++ b/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a8cc30205a0fdb528b64a54dbbd964a50b854d6a090b50cea8d2386e56df0d0
-size 9019
+oid sha256:bc7add260dd67f0f0bc65e793dec0b4f5bc8d617ee1624f013d3cab03f07de79
+size 8754
diff --git a/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap b/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap
index 575242d8d9..bf276cc7fa 100644
--- a/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PatternLock test Snapshot tests should match snapshot 1`] = `
 <div>
   <div
-    class="component component"
+    class="component"
   >
     <div
       class="canvasContainer"
diff --git a/packages/pattern-lock/src/components/base-pattern-lock/Component.tsx b/packages/pattern-lock/src/components/base-pattern-lock/Component.tsx
index c0c53833be..aef5305323 100644
--- a/packages/pattern-lock/src/components/base-pattern-lock/Component.tsx
+++ b/packages/pattern-lock/src/components/base-pattern-lock/Component.tsx
@@ -36,7 +36,6 @@ export const BasePatternLock = forwardRef<
             extraBounds = DEFAULT_EXTRA_BOUNDS,
             messageClassName,
             hover,
-            styles = {},
             disabled = false,
             ...restProps
         },
@@ -90,7 +89,7 @@ export const BasePatternLock = forwardRef<
 
         return (
             <div
-                className={cn(commonStyles.component, styles.component, className, {
+                className={cn(commonStyles.component, className, {
                     [commonStyles.hidden]: !params,
                     [commonStyles.withForgotBtn]: showForgotCodeBtn,
                     [commonStyles.disabled]: disabled,
@@ -112,14 +111,16 @@ export const BasePatternLock = forwardRef<
                     </div>
                 </div>
                 {showForgotCodeBtn && (
-                    <ButtonMobile
-                        view='transparent'
-                        className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
-                        onClick={onForgotBtnClick}
-                        dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
-                    >
-                        {forgotCodeBtnText}
-                    </ButtonMobile>
+                    <div className={commonStyles.forgotBtnContainer}>
+                        <ButtonMobile
+                            view='transparent'
+                            size={40}
+                            onClick={onForgotBtnClick}
+                            dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
+                        >
+                            {forgotCodeBtnText}
+                        </ButtonMobile>
+                    </div>
                 )}
             </div>
         );
diff --git a/packages/pattern-lock/src/components/base-pattern-lock/index.module.css b/packages/pattern-lock/src/components/base-pattern-lock/index.module.css
index 8afcb3af9c..38ff009988 100644
--- a/packages/pattern-lock/src/components/base-pattern-lock/index.module.css
+++ b/packages/pattern-lock/src/components/base-pattern-lock/index.module.css
@@ -35,7 +35,8 @@
     min-height: var(--pattern-lock-with-forgot-btn-min-height);
 }
 
-.forgotBtn {
-    display: block;
-    min-height: var(--size-xs-height);
+.forgotBtnContainer {
+    display: flex;
+    justify-content: center;
+    margin: var(--gap-8) auto var(--gap-0);
 }
diff --git a/packages/pattern-lock/src/desktop/Component.desktop.tsx b/packages/pattern-lock/src/desktop/Component.desktop.tsx
index be765912c1..880305a092 100644
--- a/packages/pattern-lock/src/desktop/Component.desktop.tsx
+++ b/packages/pattern-lock/src/desktop/Component.desktop.tsx
@@ -5,10 +5,8 @@ import { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { BasePatternLock } from '../components/base-pattern-lock';
 import { type CommonPatternLockProps } from '../typings';
 
-import styles from './desktop.module.css';
-
 export const PatternLockDesktop = forwardRef<TPatternLockInstance, CommonPatternLockProps>(
-    (restProps, ref) => <BasePatternLock {...restProps} hover={true} ref={ref} styles={styles} />,
+    (restProps, ref) => <BasePatternLock {...restProps} hover={true} ref={ref} />,
 );
 
 PatternLockDesktop.displayName = 'PatternLockDesktop';
diff --git a/packages/pattern-lock/src/desktop/desktop.module.css b/packages/pattern-lock/src/desktop/desktop.module.css
deleted file mode 100644
index 6c6b96266e..0000000000
--- a/packages/pattern-lock/src/desktop/desktop.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-@import '@alfalab/core-components-vars/src/no-typography-index.css';
-@import '../vars.css';
-
-.component {
-    margin: var(--gap-0) auto;
-    min-width: var(--pattern-lock-min-width);
-}
-
-.forgotBtn {
-    margin: var(--gap-8) auto var(--gap-0);
-}
-
-.hiddenBtn {
-    display: none;
-}
diff --git a/packages/pattern-lock/src/mobile/Component.mobile.tsx b/packages/pattern-lock/src/mobile/Component.mobile.tsx
index 98efd99c02..36735aab1d 100644
--- a/packages/pattern-lock/src/mobile/Component.mobile.tsx
+++ b/packages/pattern-lock/src/mobile/Component.mobile.tsx
@@ -5,10 +5,8 @@ import { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { BasePatternLock } from '../components/base-pattern-lock';
 import { type CommonPatternLockProps } from '../typings';
 
-import styles from './mobile.module.css';
-
 export const PatternLockMobile = forwardRef<TPatternLockInstance, CommonPatternLockProps>(
-    (restProps, ref) => <BasePatternLock {...restProps} ref={ref} styles={styles} />,
+    (restProps, ref) => <BasePatternLock {...restProps} ref={ref} />,
 );
 
 PatternLockMobile.displayName = 'PatternLockMobile';
diff --git a/packages/pattern-lock/src/mobile/mobile.module.css b/packages/pattern-lock/src/mobile/mobile.module.css
deleted file mode 100644
index 57d3ff2840..0000000000
--- a/packages/pattern-lock/src/mobile/mobile.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '@alfalab/core-components-vars/src/no-typography-index.css';
-@import '../vars.css';
-
-.component {
-    margin: var(--gap-0) auto;
-    min-width: var(--pattern-lock-min-width);
-}
-
-.forgotBtn {
-    margin: var(--gap-8) auto var(--gap-0);
-}
diff --git a/packages/pattern-lock/src/typings.ts b/packages/pattern-lock/src/typings.ts
index e17ec2e02b..e8d6b1d102 100644
--- a/packages/pattern-lock/src/typings.ts
+++ b/packages/pattern-lock/src/typings.ts
@@ -75,10 +75,6 @@ export type PrivatePatternLockProps = {
      * Включает ховер-эффект
      */
     hover?: boolean;
-    /**
-     * Стили компонента
-     */
-    styles: { [key: string]: string };
 };
 
 export type PatternLockProps = CommonPatternLockProps & {
diff --git a/packages/picker-button/src/Component.test.tsx b/packages/picker-button/src/Component.test.tsx
index 4898347365..2200de719a 100644
--- a/packages/picker-button/src/Component.test.tsx
+++ b/packages/picker-button/src/Component.test.tsx
@@ -118,7 +118,7 @@ describe('Render tests', () => {
             const button = document.querySelector('button');
             const icon = getByTestId('picker-button-icon');
 
-            expect(button).toHaveClass('size-56');
+            expect(button).toHaveClass('size56');
             expect(button).toHaveClass('secondary');
             expect(icon.getAttribute('width')).toBe(iconSize);
             expect(icon.getAttribute('height')).toBe(iconSize);
@@ -133,7 +133,7 @@ describe('Render tests', () => {
         const button = document.querySelector('button');
         const icon = getByTestId('picker-button-icon');
 
-        expect(button).toHaveClass(`size-${size}`);
+        expect(button).toHaveClass(`size${size}`);
         expect(icon.getAttribute('width')).toBe(iconSize);
         expect(icon.getAttribute('height')).toBe(iconSize);
     });
diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
index 460fc2d468..1f7fd85328 100644
--- a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`Snapshots tests should display correctly 1`] = `
       <button
         aria-controls="downshift-:r0:-menu"
         aria-labelledby="downshift-:r0:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block withRightAddons"
+        class="component block component component component component size56 hug defaultPaddings defaultWidth minHeight secondary secondary secondary size56 component"
         id="downshift-:r0:-input"
         tabindex="0"
         type="button"
@@ -29,7 +29,7 @@ exports[`Snapshots tests should display correctly 1`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -68,7 +68,7 @@ exports[`Snapshots tests should display correctly 2`] = `
       <button
         aria-controls="downshift-:r2:-menu"
         aria-labelledby="downshift-:r2:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block withRightAddons"
+        class="component block component component component component size56 hug defaultPaddings defaultWidth minHeight secondary secondary secondary size56 component"
         id="downshift-:r2:-input"
         tabindex="0"
         type="button"
@@ -84,7 +84,7 @@ exports[`Snapshots tests should display correctly 2`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -123,7 +123,7 @@ exports[`Snapshots tests should display correctly 3`] = `
       <button
         aria-controls="downshift-:r4:-menu"
         aria-labelledby="downshift-:r4:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block withRightAddons"
+        class="component block component component component component size56 hug defaultPaddings defaultWidth minHeight secondary secondary secondary size56 component"
         id="downshift-:r4:-input"
         tabindex="0"
         type="button"
@@ -139,7 +139,7 @@ exports[`Snapshots tests should display correctly 3`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -178,13 +178,13 @@ exports[`Snapshots tests should display opened correctly 1`] = `
       <button
         aria-controls="downshift-:r1:-menu"
         aria-labelledby="downshift-:r1:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block iconOnly"
+        class="component block component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
         id="downshift-:r1:-input"
         tabindex="0"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer open"
@@ -223,13 +223,13 @@ exports[`Snapshots tests should display opened correctly 2`] = `
       <button
         aria-controls="downshift-:r1:-menu"
         aria-labelledby="downshift-:r1:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block iconOnly"
+        class="component block component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
         id="downshift-:r1:-input"
         tabindex="0"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer open"
@@ -268,13 +268,13 @@ exports[`Snapshots tests should display opened correctly 3`] = `
       <button
         aria-controls="downshift-:r3:-menu"
         aria-labelledby="downshift-:r3:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block iconOnly"
+        class="component block component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
         id="downshift-:r3:-input"
         tabindex="0"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer open"
@@ -360,29 +360,25 @@ exports[`Snapshots tests should display opened correctly 4`] = `
                           >
                             <button
                               aria-label="закрыть"
-                              class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                              class="component cc-icon-button button button mobile component primary component component border_32 component"
                               type="button"
                             >
                               <span
-                                class="label stretchText"
+                                class="iconWrapper size-32 center"
                               >
-                                <span
-                                  class="iconWrapper size-32 center"
+                                <svg
+                                  class="icon"
+                                  fill="currentColor"
+                                  focusable="false"
+                                  height="24"
+                                  role="img"
+                                  viewBox="0 0 24 24"
+                                  width="24"
                                 >
-                                  <svg
-                                    class="icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height="24"
-                                    role="img"
-                                    viewBox="0 0 24 24"
-                                    width="24"
-                                  >
-                                    <path
-                                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                                    />
-                                  </svg>
-                                </span>
+                                  <path
+                                    d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                                  />
+                                </svg>
                               </span>
                             </button>
                           </div>
@@ -759,13 +755,13 @@ exports[`Snapshots tests should display opened correctly 5`] = `
       <button
         aria-controls="downshift-:r5:-menu"
         aria-labelledby="downshift-:r5:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block iconOnly"
+        class="component block component component component component size56 hug minWidth minHeight secondary secondary secondary size56 component"
         id="downshift-:r5:-input"
         tabindex="0"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer open"
@@ -851,29 +847,25 @@ exports[`Snapshots tests should display opened correctly 6`] = `
                           >
                             <button
                               aria-label="закрыть"
-                              class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                              class="component cc-icon-button button button mobile component primary component component border_32 component"
                               type="button"
                             >
                               <span
-                                class="label stretchText"
+                                class="iconWrapper size-32 center"
                               >
-                                <span
-                                  class="iconWrapper size-32 center"
+                                <svg
+                                  class="icon"
+                                  fill="currentColor"
+                                  focusable="false"
+                                  height="24"
+                                  role="img"
+                                  viewBox="0 0 24 24"
+                                  width="24"
                                 >
-                                  <svg
-                                    class="icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height="24"
-                                    role="img"
-                                    viewBox="0 0 24 24"
-                                    width="24"
-                                  >
-                                    <path
-                                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                                    />
-                                  </svg>
-                                </span>
+                                  <path
+                                    d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                                  />
+                                </svg>
                               </span>
                             </button>
                           </div>
diff --git a/packages/plate/src/Component.test.tsx b/packages/plate/src/Component.test.tsx
index f97b347b9a..f84e552a8d 100644
--- a/packages/plate/src/Component.test.tsx
+++ b/packages/plate/src/Component.test.tsx
@@ -69,9 +69,9 @@ describe('Plate', () => {
         expect(queryByTestId('button-2')).toBeInTheDocument();
         expect(queryByTestId('button-3')).toBeInTheDocument();
 
-        expect(queryByTestId('button-1')).toHaveClass(`size-${size}`);
-        expect(queryByTestId('button-2')).toHaveClass(`size-${size}`);
-        expect(queryByTestId('button-3')).toHaveClass(`size-${size}`);
+        expect(queryByTestId('button-1')).toHaveClass(`size${size}`);
+        expect(queryByTestId('button-2')).toHaveClass(`size${size}`);
+        expect(queryByTestId('button-3')).toHaveClass(`size${size}`);
 
         expect(queryByTestId('button-1')).toHaveClass('secondary');
         expect(queryByTestId('button-2')).toHaveClass('transparent');
diff --git a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
index a9f447f373..a12755235c 100644
--- a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
@@ -30,11 +30,11 @@ exports[`SidePanelDesktop snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="назад"
-                  class="component text size-48 hug size-48 component text component text component component"
+                  class="component component component component component size48 hug text text text size48 component component component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <div
                       class="flex"
@@ -77,29 +77,25 @@ exports[`SidePanelDesktop snapshots tests should match snapshot 1`] = `
                 >
                   <button
                     aria-label="закрыть"
-                    class="component text size-48 hug size-48 component text component text cc-icon-button button button primary component component border_48"
+                    class="component cc-icon-button button button component primary component component border_48 component"
                     type="button"
                   >
                     <span
-                      class="label stretchText"
+                      class="iconWrapper size-48 center"
                     >
-                      <span
-                        class="iconWrapper size-48 center"
+                      <svg
+                        class="icon"
+                        fill="currentColor"
+                        focusable="false"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
                       >
-                        <svg
-                          class="icon"
-                          fill="currentColor"
-                          focusable="false"
-                          height="24"
-                          role="img"
-                          viewBox="0 0 24 24"
-                          width="24"
-                        >
-                          <path
-                            d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
+                        />
+                      </svg>
                     </span>
                   </button>
                 </div>
@@ -172,11 +168,11 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="назад"
-                  class="component text size-32 hug size-32 component text component text component component mobileComponent"
+                  class="component component component component component size32 hug text text text size32 component component mobileComponent component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <div
                       class="flex"
@@ -219,29 +215,25 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = `
                 >
                   <button
                     aria-label="закрыть"
-                    class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                    class="component cc-icon-button button button mobile component primary component component border_32 component"
                     type="button"
                   >
                     <span
-                      class="label stretchText"
+                      class="iconWrapper size-32 center"
                     >
-                      <span
-                        class="iconWrapper size-32 center"
+                      <svg
+                        class="icon"
+                        fill="currentColor"
+                        focusable="false"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
                       >
-                        <svg
-                          class="icon"
-                          fill="currentColor"
-                          focusable="false"
-                          height="24"
-                          role="img"
-                          viewBox="0 0 24 24"
-                          width="24"
-                        >
-                          <path
-                            d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                        />
+                      </svg>
                     </span>
                   </button>
                 </div>
diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png
index 08611e4447..e3478b185e 100644
--- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png
+++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c572698e7a2e6b6aeb77c40a9ca443c03e0931b5790e58a383bd02cb3094af18
-size 7987
+oid sha256:699e84b4e35ad13f7201dbc5f96010d60011b7c08c69a45e5a85b747ea152ee8
+size 8080
diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png
index 294994425a..b1f440a8dd 100644
--- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png
+++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9750825ae110dd40bde417cf16122bc38db622435a9513925873b1123ad7c325
-size 7351
+oid sha256:af7c24f6602e818ae138537b17ef602e8dd26971de8ddec945caa782aa013c9b
+size 7369
diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png
index d66f0440fa..c82d9fc6cc 100644
--- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png
+++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ac058c0ff04f565cd6208bd5ede546cbaea78c1f85d3bb508c3efbf6ad827c56
-size 7610
+oid sha256:cd1cb94c931408904930ae306883ef68861a3553993c4ede7e576b57ec7928b8
+size 7738
diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png
index a98d0227ee..d2efdd3305 100644
--- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png
+++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a4f1bf6046223e353ac71e2ab94df0d05c05d51d770f03317d24a65fc5f2250
-size 7824
+oid sha256:008ac7a1272a95c5c3dc345d30e81705d9ba1fb98911da94418ce0f004870c8a
+size 7837
diff --git a/packages/toast-plate/src/__image_snapshots__/click-toast-plate-action-button-2-snap.png b/packages/toast-plate/src/__image_snapshots__/click-toast-plate-action-button-2-snap.png
index 94414b101d..6ed6644efb 100644
--- a/packages/toast-plate/src/__image_snapshots__/click-toast-plate-action-button-2-snap.png
+++ b/packages/toast-plate/src/__image_snapshots__/click-toast-plate-action-button-2-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb8a7a4914c0da52cce4e63438175e19b66ab1bafaab4cff36c044499491bb0d
-size 8366
+oid sha256:f573d006f58e13148821d3e1db35ce2e16046574e1f517b73f5d799e0a3fd80f
+size 8620
diff --git a/packages/toast-plate/src/__image_snapshots__/click-toast-plate-inverted-views-2-snap.png b/packages/toast-plate/src/__image_snapshots__/click-toast-plate-inverted-views-2-snap.png
index aadc46fd73..eeede83270 100644
--- a/packages/toast-plate/src/__image_snapshots__/click-toast-plate-inverted-views-2-snap.png
+++ b/packages/toast-plate/src/__image_snapshots__/click-toast-plate-inverted-views-2-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7feb7bee476ec0ef0f8adb3b164ac067c576f8811846ac903f164295b3944836
-size 8410
+oid sha256:b9310a20e865debea20542198c0592f26af7c7a07e1148fcde2f741d94e0b36c
+size 8659
diff --git a/packages/vars/src/mixins.css b/packages/vars/src/mixins.css
index 88b145fbe3..ff406eafc6 100644
--- a/packages/vars/src/mixins.css
+++ b/packages/vars/src/mixins.css
@@ -119,3 +119,16 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+
+@define-mixin disabled {
+    &:disabled,
+    &.disabled {
+        @mixin-content;
+    }
+}
+
+@define-mixin not-disabled {
+    &:not(:disabled):not(.disabled) {
+        @mixin-content;
+    }
+}
diff --git a/postcss.config.js b/postcss.config.js
index f951a5af51..42925dcdb3 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -8,7 +8,7 @@ module.exports = {
     plugins: [
         require('postcss-import')({}),
         require('postcss-for')({}),
-        require('postcss-each')({}),
+        require('./tools/postcss/postcss-each.cjs')({}),
         require('./tools/postcss/postcss-subtract-mixin.cjs')({}),
         require('postcss-mixins')({
             mixinsFiles: globSync('src/*.css', {
diff --git a/tools/postcss/postcss-each.cjs b/tools/postcss/postcss-each.cjs
new file mode 100644
index 0000000000..da719e101c
--- /dev/null
+++ b/tools/postcss/postcss-each.cjs
@@ -0,0 +1,78 @@
+const assert = require('node:assert/strict');
+const postcssSimpleVars = require('postcss-simple-vars');
+
+/**
+ * @type {import('postcss').PluginCreator}
+ */
+const postcssEach = () => {
+    const separator = /\s+in\s+/;
+
+    return {
+        postcssPlugin: 'postcss-each',
+        AtRule: {
+            each: async (rule, { list, postcss }) => {
+                assert(separator.test(rule.params), 'Missed "in" keyword in @each');
+
+                const [variablesPart, valuesPart] = rule.params
+                    .split(/\s+in\s+/)
+                    .map((s) => s.trim());
+
+                assert(variablesPart.length > 0, 'Missed variable in @each');
+                assert(valuesPart.length > 0, 'Missed values list in @each');
+
+                const [variables, valuesList] = [variablesPart, valuesPart].map((s) =>
+                    list.comma(s),
+                );
+
+                assert(
+                    variables.every((variable) => variable.startsWith('$')),
+                    'Every variable name must start with "$"',
+                );
+
+                const values = valuesList.map((value, i) => {
+                    const match = /^\((.*)\)$/.exec(value);
+
+                    return (match ? list.comma(match[1]) : [value]).concat(`${i}`);
+                });
+
+                const valueSize = Math.max(...values.map((value) => value.length));
+
+                assert(
+                    values.every((value) => value.length === valueSize),
+                    'Every value in list must have the same size',
+                );
+
+                assert(variables.length <= valueSize, 'Defined more variables than value in list');
+
+                if (variables.length === valueSize - 1) {
+                    variables.push('$i');
+                }
+
+                await Promise.all(
+                    values.map(async (value) => {
+                        const context = Object.fromEntries(
+                            variables.map((variable, i) => [variable.replace(/^\$/, ''), value[i]]),
+                        );
+
+                        const {
+                            root: {
+                                nodes: [proxy],
+                            },
+                        } = await postcss(postcssSimpleVars({ only: context })).process(
+                            rule.clone(),
+                            { from: undefined },
+                        );
+
+                        rule.parent.insertBefore(rule, proxy.nodes);
+                    }),
+                );
+
+                rule.remove();
+            },
+        },
+    };
+};
+
+postcssEach.postcss = true;
+
+module.exports = postcssEach;
diff --git a/yarn.lock b/yarn.lock
index ce4813d858..c46629b924 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -110,9 +110,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-action-button@workspace:packages/action-button"
   dependencies:
+    "@alfalab/core-components-button": "npm:^13.1.0"
     "@alfalab/core-components-shared": "npm:^2.1.0"
-    "@alfalab/core-components-spinner": "npm:^6.0.2"
-    "@alfalab/hooks": "npm:^1.13.1"
     classnames: "npm:^2.5.1"
     react-merge-refs: "npm:^1.1.0"
     tslib: "npm:^2.4.0"
@@ -577,6 +576,7 @@ __metadata:
   resolution: "@alfalab/core-components-custom-button@workspace:packages/custom-button"
   dependencies:
     "@alfalab/core-components-button": "npm:^13.1.0"
+    "@alfalab/core-components-mq": "npm:^6.0.2"
     classnames: "npm:^2.5.1"
     tslib: "npm:^2.4.0"
   peerDependencies:
@@ -1586,7 +1586,6 @@ __metadata:
     postcss-color-mod-function: "npm:^4.1.1"
     postcss-custom-media: "npm:^8.0.2"
     postcss-custom-properties: "npm:^12.1.10"
-    postcss-each: "npm:^1.1.0"
     postcss-export-custom-variables: "npm:^1.0.0"
     postcss-for: "npm:^2.1.1"
     postcss-import: "npm:^16.1.1"
@@ -1594,6 +1593,7 @@ __metadata:
     postcss-mixins: "npm:^7.0.3"
     postcss-modules: "npm:^6.0.1"
     postcss-preset-env: "npm:^7.8.3"
+    postcss-simple-vars: "npm:^7.0.1"
     prettier: "npm:~3.6.2"
     querystring-es3: "npm:^0.2.1"
     raw-loader: "npm:^4.0.1"
@@ -26464,17 +26464,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-each@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "postcss-each@npm:1.1.0"
-  dependencies:
-    postcss-simple-vars: "npm:^6.0.0"
-  peerDependencies:
-    postcss: ^8.0.0
-  checksum: 10c0/92a1e4a31f7f933920215104f055e2d2d6c40334ba6fd4d7aee76cc21ba034528aa1ab16316bb1d84f1f14b1d6b923f1c3541099ef7cf103b160bcc33676e009
-  languageName: node
-  linkType: hard
-
 "postcss-env-function@npm:^4.0.6":
   version: 4.0.6
   resolution: "postcss-env-function@npm:4.0.6"
@@ -27450,7 +27439,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-simple-vars@npm:^6.0.0, postcss-simple-vars@npm:^6.0.3":
+"postcss-simple-vars@npm:^6.0.3":
   version: 6.0.3
   resolution: "postcss-simple-vars@npm:6.0.3"
   peerDependencies:
@@ -27459,6 +27448,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-simple-vars@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-simple-vars@npm:7.0.1"
+  peerDependencies:
+    postcss: ^8.2.1
+  checksum: 10c0/b59c750b2f406a18b133184144b5ffefbd21a2179c5bf5d54651269c0b6bb0110c2bbed33a9161d8b93f8a11cf7725da0a65653e7c2786c8a59f937591115a33
+  languageName: node
+  linkType: hard
+
 "postcss-svgo@npm:^5.1.0":
   version: 5.1.0
   resolution: "postcss-svgo@npm:5.1.0"