diff --git a/src/components/ActionsPanel/ActionsPanel.tsx b/src/components/ActionsPanel/ActionsPanel.tsx
index 6ab747e46d..134aa14e72 100644
--- a/src/components/ActionsPanel/ActionsPanel.tsx
+++ b/src/components/ActionsPanel/ActionsPanel.tsx
@@ -44,9 +44,7 @@ export const ActionsPanel = ({
                     size="m"
                     onClick={onClose}
                     className={b('button-close')}
-                    extraProps={{
-                        'aria-label': i18n('label_close'),
-                    }}
+                    aria-label={i18n('label_close')}
                 >
                     <Icon key="icon" data={Xmark} />
                 </Button>
diff --git a/src/components/ActionsPanel/components/CollapseActions.tsx b/src/components/ActionsPanel/components/CollapseActions.tsx
index 9faa79e1e6..65d565e5ba 100644
--- a/src/components/ActionsPanel/components/CollapseActions.tsx
+++ b/src/components/ActionsPanel/components/CollapseActions.tsx
@@ -69,9 +69,7 @@ export const CollapseActions = ({actions, maxRowActions}: Props) => {
                                 <Button
                                     view="flat-contrast"
                                     size="m"
-                                    extraProps={{
-                                        'aria-label': i18n('label_more'),
-                                    }}
+                                    aria-label={i18n('label_more')}
                                     onClick={onClick}
                                 >
                                     <Icon data={Ellipsis} />
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 6f0c78c1c7..fdf06a01ee 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -66,9 +66,7 @@ export const Alert = (props: AlertProps) => {
                             view="flat"
                             className={bAlert('close-btn')}
                             onClick={onClose}
-                            extraProps={{
-                                'aria-label': i18n('label_close'),
-                            }}
+                            aria-label={i18n('label_close')}
                         >
                             <Icon
                                 data={Xmark}
diff --git a/src/components/Alert/types.ts b/src/components/Alert/types.ts
index 6a31eff5ce..b9abb9ccdc 100644
--- a/src/components/Alert/types.ts
+++ b/src/components/Alert/types.ts
@@ -89,7 +89,7 @@ export interface AlertActionsProps {
     items?: AlertAction[];
     children?: React.ReactNode | React.ReactNode[];
 }
-export interface AlertActionProps extends ButtonProps {}
+export type AlertActionProps = ButtonProps;
 export interface AlertTitleProps {
     className?: string;
     text: string;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 850c4ec68b..4ba83fe0b6 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import type {DOMProps, QAProps} from '../types';
+import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 import {isIcon, isSvg} from '../utils/common';
 import {eventBroker} from '../utils/event-broker';
@@ -35,8 +35,7 @@ export type ButtonPin =
 
 export type ButtonWidth = 'auto' | 'max';
 
-export interface ButtonProps extends DOMProps, QAProps {
-    /** Button appearance */
+interface ButtonCommonProps extends QAProps {
     view?: ButtonView;
     size?: ButtonSize;
     pin?: ButtonPin;
@@ -44,29 +43,48 @@ export interface ButtonProps extends DOMProps, QAProps {
     disabled?: boolean;
     loading?: boolean;
     width?: ButtonWidth;
-    title?: string;
-    tabIndex?: number;
-    id?: string;
-    type?: 'button' | 'submit' | 'reset';
-    component?: React.ElementType;
-    href?: string;
-    target?: string;
-    rel?: string;
-    extraProps?:
-        | React.ButtonHTMLAttributes<HTMLButtonElement>
-        | React.AnchorHTMLAttributes<HTMLAnchorElement>;
-    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-    onFocus?: React.FocusEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-    onBlur?: React.FocusEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-    /** Button content. You can mix button text with `<Icon/>` component */
     children?: React.ReactNode;
 }
 
+export interface ButtonButtonProps
+    extends ButtonCommonProps,
+        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
+    component?: never;
+    href?: never;
+    /**
+     * @deprecated Use additional props at the root
+     */
+    extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+export interface ButtonLinkProps
+    extends ButtonCommonProps,
+        React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    component?: never;
+    href: string;
+    /**
+     * @deprecated Use additional props at the root
+     */
+    extraProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+
+export type ButtonComponentProps<T extends React.ElementType = 'button'> = ButtonCommonProps &
+    React.ComponentPropsWithoutRef<T> & {
+        component: T;
+        /**
+         * @deprecated Use additional props at the root
+         */
+        extraProps?: React.ComponentPropsWithoutRef<T>;
+    };
+
+export type ButtonProps<T extends React.ElementType = 'button'> =
+    | ButtonLinkProps
+    | ButtonButtonProps
+    | ButtonComponentProps<T>;
+
 const b = block('button');
 
-const ButtonWithHandlers = React.forwardRef<HTMLElement, ButtonProps>(function Button(
+const _Button = React.forwardRef(function Button(
     {
         view = 'normal',
         size = 'm',
@@ -75,104 +93,100 @@ const ButtonWithHandlers = React.forwardRef<HTMLElement, ButtonProps>(function B
         disabled = false,
         loading = false,
         width,
-        title,
-        tabIndex,
-        type = 'button',
-        component,
-        href,
-        target,
-        rel,
-        extraProps,
-        onClick,
-        onMouseEnter,
-        onMouseLeave,
-        onFocus,
-        onBlur,
         children,
-        id,
-        style,
-        className,
+        extraProps,
         qa,
-    },
+        ...props
+    }: ButtonProps,
     ref,
 ) {
     const handleClickCapture = React.useCallback(
-        (event: React.SyntheticEvent) => {
+        (event: React.MouseEvent<any>) => {
             eventBroker.publish({
                 componentId: 'Button',
                 eventId: 'click',
                 domEvent: event,
                 meta: {
                     content: event.currentTarget.textContent,
-                    view,
+                    view: view,
                 },
             });
+
+            if (props.onClickCapture) {
+                props.onClickCapture(event);
+            }
         },
-        [view],
+        [view, props.onClickCapture],
     );
 
     const commonProps = {
-        title,
-        tabIndex,
-        onClick,
         onClickCapture: handleClickCapture,
-        onMouseEnter,
-        onMouseLeave,
-        onFocus,
-        onBlur,
-        id,
-        style,
         className: b(
             {
-                view,
-                size,
-                pin,
-                selected,
+                view: view,
+                size: size,
+                pin: pin,
+                selected: selected,
                 disabled: disabled || loading,
-                loading,
-                width,
+                loading: loading,
+                width: width,
             },
-            className,
+            props.className,
         ),
         'data-qa': qa,
     };
 
-    if (typeof href === 'string' || component) {
-        const linkProps = {
-            href,
-            target,
-            rel: target === '_blank' && !rel ? 'noopener noreferrer' : rel,
-        };
+    if (props.component) {
         return React.createElement(
-            component || 'a',
+            props.component,
             {
+                ...props,
                 ...extraProps,
                 ...commonProps,
-                ...(component ? {} : linkProps),
-                ref: ref as React.Ref<HTMLAnchorElement>,
-                'aria-disabled': disabled || loading,
+                ref: ref,
+                'aria-disabled': disabled ?? undefined,
             },
             prepareChildren(children),
         );
-    } else {
+    }
+
+    if (typeof props.href !== 'undefined') {
         return (
-            <button
-                {...(extraProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+            <a
+                {...props}
+                {...(extraProps as ButtonLinkProps['extraProps'])}
                 {...commonProps}
-                ref={ref as React.Ref<HTMLButtonElement>}
-                type={type}
-                disabled={disabled || loading}
-                aria-pressed={selected}
+                ref={ref as React.Ref<HTMLAnchorElement>}
+                rel={props.target === '_blank' && !props.rel ? 'noopener noreferrer' : props.rel}
+                aria-disabled={disabled ?? undefined}
             >
                 {prepareChildren(children)}
-            </button>
+            </a>
         );
     }
-});
 
-ButtonWithHandlers.displayName = 'Button';
+    return (
+        <button
+            {...props}
+            {...(extraProps as ButtonButtonProps['extraProps'])}
+            {...commonProps}
+            ref={ref as React.Ref<HTMLButtonElement>}
+            type={props.type || 'button'}
+            disabled={disabled || loading}
+            aria-pressed={selected}
+        >
+            {prepareChildren(children)}
+        </button>
+    );
+}) as <T extends React.ElementType, P extends ButtonProps<T>>(
+    props: P extends {component: T}
+        ? ButtonComponentProps<T> & {ref?: any} // TODO: Add ref inference
+        : P extends {href: string}
+          ? ButtonLinkProps & {ref?: React.Ref<HTMLAnchorElement>}
+          : ButtonButtonProps & {ref?: React.Ref<HTMLButtonElement>},
+) => React.ReactElement;
 
-export const Button = Object.assign(ButtonWithHandlers, {Icon: ButtonIcon});
+export const Button = Object.assign(_Button, {Icon: ButtonIcon});
 
 const isButtonIconComponent = isOfType(ButtonIcon);
 const isSpan = isOfType<{className?: string}>('span');
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
index e633983fda..c423166009 100644
--- a/src/components/Button/README.md
+++ b/src/components/Button/README.md
@@ -448,33 +448,21 @@ LANDING_BLOCK-->
 
 ## Properties
 
-| Name         | Description                                                        |              Type               |     Default     |
-| :----------- | :----------------------------------------------------------------- | :-----------------------------: | :-------------: |
-| children     | Button content. You can use both text and the `<Icon/>` component. |           `ReactNode`           |                 |
-| className    | `class` HTML attribute                                             |            `string`             |                 |
-| component    | Overrides the root component                                       |       `ElementType<any>`        |   `"button"`    |
-| disabled     | Toggles the `disabled` state                                       |             `false`             |     `false`     |
-| extraProps   | Additional properties                                              |            `Record`             |                 |
-| href         | `href` HTML attribute                                              |            `string`             |                 |
-| id           | `id` HTML attribute                                                |            `string`             |                 |
-| loading      | Toggles the `loading` state                                        |             `false`             |     `false`     |
-| onBlur       | `blur` event handler                                               |           `Function`            |                 |
-| onClick      | `click` event handler                                              |           `Function`            |                 |
-| onFocus      | `focus` event handler                                              |           `Function`            |                 |
-| onMouseEnter | `mouseenter` event handler                                         |           `Function`            |                 |
-| onMouseLeave | `mouseleave` event handler                                         |           `Function`            |                 |
-| pin          | Sets the button edge style                                         |            `string`             | `"round-round"` |
-| qa           | `data-qa` HTML attribute, used for testing                         |            `string`             |                 |
-| rel          | `rel` HTML attribute                                               |            `string`             |                 |
-| selected     | Toggles the `selected` state                                       |                                 |                 |
-| size         | Sets the button size                                               |            `string`             |      `"m"`      |
-| style        | `style` HTML attribute                                             |      `React.CSSProperties`      |                 |
-| tabIndex     | `tabIndex` HTML attribute                                          |            `number`             |                 |
-| target       | `target` HTML attribute                                            |            `string`             |                 |
-| title        | `title` HTML attribute                                             |            `string`             |                 |
-| type         | `type` HTML attribute                                              | `"button"` `"submit"` `"reset"` |   `"button"`    |
-| view         | Sets the button appearance                                         |            `string`             |   `"normal"`    |
-| width        | `"auto"` `"max"`                                                   |        `"auto"` `"max"`         |                 |
+`Buttont` accepts any valid `button` or `a` element props in addition to these:
+
+| Name      | Description                                                          |              Type               |     Default     |
+| :-------- | :------------------------------------------------------------------- | :-----------------------------: | :-------------: |
+| children  | `Button` content. You can use both text and the `<Icon/>` component. |        `React.ReactNode`        |                 |
+| component | Overrides the root component                                         |       `React.ElementType`       |                 |
+| disabled  | Toggles the `disabled` state                                         |            `boolean`            |     `false`     |
+| href      | Pass this to make the root component a link                          |            `string`             |                 |
+| loading   | Toggles the `loading` state                                          |            `boolean`            |     `false`     |
+| pin       | Sets the `Button` edge style                                         |            `string`             | `"round-round"` |
+| qa        | `data-qa` HTML attribute, used for testing                           |            `string`             |                 |
+| selected  | Toggles the `selected` state                                         |            `boolean`            |                 |
+| size      | Sets the`Button` size                                                | `"xs"` `"s"` `"m"` `"l"` `"xl"` |      `"m"`      |
+| view      | Sets the `Button` appearance                                         |          `ButtonView`           |   `"normal"`    |
+| width     | Controls how `Button` uses parent's space                            |        `"auto"` `"max"`         |                 |
 
 ## CSS API
 
diff --git a/src/components/Button/__stories__/Button.stories.tsx b/src/components/Button/__stories__/Button.stories.tsx
index b485a93c86..156f55f80b 100644
--- a/src/components/Button/__stories__/Button.stories.tsx
+++ b/src/components/Button/__stories__/Button.stories.tsx
@@ -14,6 +14,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import {Showcase} from '../../../demo/Showcase';
 import {Icon as IconComponent} from '../../Icon/Icon';
 import {Button} from '../Button';
+import type {ButtonButtonProps, ButtonLinkProps} from '../Button';
 
 import {ButtonViewShowcase} from './ButtonViewShowcase';
 
@@ -54,7 +55,7 @@ export const Default: Story = {
 };
 
 export const View: Story = {
-    render: (args) => <ButtonViewShowcase {...args} />,
+    render: (args) => <ButtonViewShowcase {...(args as ButtonButtonProps)} />,
 };
 
 export const Size: Story = {
@@ -174,7 +175,7 @@ export const Link: Story = {
         children: ['Link Button', <IconComponent key="icon" data={ArrowUpRightFromSquare} />],
         href: 'https://gravity-ui.com',
         target: '_blank',
-    },
+    } as ButtonLinkProps,
     name: 'As Link',
 };
 
@@ -190,7 +191,7 @@ export const InsideText: Story = {
                 <Button {...args} /> dolor
                 <br />
                 sit{' '}
-                <Button {...args} extraProps={{'aria-label': 'Icon button inside text'}}>
+                <Button {...args} aria-label="Icon button inside text">
                     <IconComponent data={Globe} />
                 </Button>{' '}
                 amet
diff --git a/src/components/Button/__tests__/Button.test.tsx b/src/components/Button/__tests__/Button.test.tsx
index ec28285ad1..3476954662 100644
--- a/src/components/Button/__tests__/Button.test.tsx
+++ b/src/components/Button/__tests__/Button.test.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import {render, screen} from '../../../../test-utils/utils';
 import {Button} from '../Button';
-import type {ButtonPin, ButtonProps, ButtonSize, ButtonView} from '../Button';
+import type {ButtonPin, ButtonSize, ButtonView} from '../Button';
 
 const qaId = 'button-component';
 
@@ -105,7 +105,7 @@ describe('Button', () => {
     test('should render custom component', () => {
         const text = 'Button with custom component';
 
-        const ButtonComponent = (props: ButtonProps) => {
+        const ButtonComponent = (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
             return (
                 <button {...props} style={{boxShadow: '2px 2px 2px 2px deepskyblue'}}>
                     {text}
@@ -261,7 +261,7 @@ describe('Button', () => {
     test('use passed ref for component', () => {
         const ref = React.createRef<HTMLLabelElement>();
 
-        render(<Button ref={ref} qa={qaId} />);
+        render(<Button ref={ref} component="label" qa={qaId} />);
         const button = screen.getByTestId(qaId);
 
         expect(ref.current).toBe(button);
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 32e9f49703..e472ebacfd 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,2 +1,12 @@
-export * from './Button';
+export type {
+    ButtonProps,
+    ButtonButtonProps,
+    ButtonLinkProps,
+    ButtonComponentProps,
+    ButtonView,
+    ButtonSize,
+    ButtonPin,
+    ButtonWidth,
+} from './Button';
+export {Button} from './Button';
 export {ButtonIcon} from './ButtonIcon';
diff --git a/src/components/ClipboardButton/ClipboardButton.tsx b/src/components/ClipboardButton/ClipboardButton.tsx
index 56a1e34643..98c7dac611 100644
--- a/src/components/ClipboardButton/ClipboardButton.tsx
+++ b/src/components/ClipboardButton/ClipboardButton.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import {ActionTooltip} from '../ActionTooltip';
 import {Button} from '../Button';
-import type {ButtonProps, ButtonSize} from '../Button';
+import type {ButtonButtonProps, ButtonSize} from '../Button';
 import {ClipboardIcon} from '../ClipboardIcon';
 import {CopyToClipboard} from '../CopyToClipboard';
 import type {
@@ -24,8 +24,7 @@ export interface ClipboardButtonProps
     extends Omit<CopyToClipboardProps, 'children'>,
         Omit<ClipboardButtonComponentProps, 'status' | 'closeDelay' | 'onClick'> {}
 
-interface ClipboardButtonComponentProps
-    extends Omit<ButtonProps, 'href' | 'component' | 'target' | 'rel' | 'loading'> {
+interface ClipboardButtonComponentProps extends Omit<ButtonButtonProps, 'onCopy'> {
     status: CopyToClipboardStatus;
     closeDelay: number | undefined;
     /** Disable tooltip. Tooltip won't be shown */
@@ -57,7 +56,6 @@ const ClipboardButtonComponent = (props: ClipboardButtonComponentProps) => {
         tooltipSuccessText = i18n('endCopy'),
         status,
         view = 'flat',
-        extraProps = {},
         children,
         iconPosition = 'start',
         closeDelay,
@@ -81,12 +79,9 @@ const ClipboardButtonComponent = (props: ClipboardButtonComponentProps) => {
             <Button
                 view={view}
                 size={size}
-                extraProps={{
-                    'aria-label': tooltipInitialText,
-                    ...extraProps,
-                }}
                 onMouseEnter={onMouseEnter}
                 onFocus={onFocus}
+                aria-label={tooltipInitialText}
                 {...rest}
             >
                 {iconPosition === 'start' ? buttonIcon : null}
diff --git a/src/components/Dialog/ButtonClose/ButtonClose.tsx b/src/components/Dialog/ButtonClose/ButtonClose.tsx
index 9bf96579b8..5ce56981cd 100644
--- a/src/components/Dialog/ButtonClose/ButtonClose.tsx
+++ b/src/components/Dialog/ButtonClose/ButtonClose.tsx
@@ -26,9 +26,7 @@ export function ButtonClose({onClose}: ButtonCloseProps) {
                 size="l"
                 className={b('btn')}
                 onClick={(event) => onClose(event, {isOutsideClick: false})}
-                extraProps={{
-                    'aria-label': i18n('close'),
-                }}
+                aria-label={i18n('close')}
             >
                 <Icon data={Xmark} size={20} />
             </Button>
diff --git a/src/components/Dialog/DialogFooter/DialogFooter.tsx b/src/components/Dialog/DialogFooter/DialogFooter.tsx
index d87e078fa4..f91f9ea23f 100644
--- a/src/components/Dialog/DialogFooter/DialogFooter.tsx
+++ b/src/components/Dialog/DialogFooter/DialogFooter.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import {Button} from '../../Button';
-import type {ButtonProps, ButtonView} from '../../Button';
+import type {ButtonButtonProps, ButtonView} from '../../Button';
 import {Popup} from '../../Popup';
 import {block} from '../../utils/cn';
 
@@ -18,8 +18,8 @@ interface DialogFooterOwnProps {
     onClickButtonCancel?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     textButtonCancel?: string;
     textButtonApply?: string;
-    propsButtonCancel?: Partial<ButtonProps>;
-    propsButtonApply?: Partial<ButtonProps>;
+    propsButtonCancel?: ButtonButtonProps;
+    propsButtonApply?: ButtonButtonProps;
     loading?: boolean;
     children?: React.ReactNode;
     errorText?: string;
diff --git a/src/components/Dialog/__stories__/DialogShowcase.tsx b/src/components/Dialog/__stories__/DialogShowcase.tsx
index 382b3d1456..9113337c40 100644
--- a/src/components/Dialog/__stories__/DialogShowcase.tsx
+++ b/src/components/Dialog/__stories__/DialogShowcase.tsx
@@ -197,7 +197,7 @@ export function DialogShowcase() {
                     textButtonApply="attack"
                     propsButtonApply={{
                         className: 'my-custom-apply-btn-class',
-                        extraProps: {autoFocus: true},
+                        autoFocus: true,
                     }}
                     textButtonCancel="fend off attack"
                     propsButtonCancel={{className: 'my-custom-cancel-btn-class'}}
diff --git a/src/components/FilePreview/FilePreviewAction.tsx b/src/components/FilePreview/FilePreviewAction.tsx
index 7c0723455e..d41bc16429 100644
--- a/src/components/FilePreview/FilePreviewAction.tsx
+++ b/src/components/FilePreview/FilePreviewAction.tsx
@@ -3,6 +3,7 @@ import type * as React from 'react';
 import {ActionTooltip} from '../ActionTooltip';
 import type {ActionTooltipProps} from '../ActionTooltip';
 import {Button} from '../Button';
+import type {ButtonButtonProps, ButtonLinkProps} from '../Button';
 
 export interface FilePreviewActionProps {
     id?: string;
@@ -11,9 +12,7 @@ export interface FilePreviewActionProps {
     href?: string;
     disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-    extraProps?:
-        | React.ButtonHTMLAttributes<HTMLButtonElement>
-        | React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    extraProps?: ButtonButtonProps | ButtonLinkProps;
     tooltipExtraProps?: Omit<ActionTooltipProps, 'id' | 'title' | 'children'>;
 }
 
@@ -31,13 +30,14 @@ export function FilePreviewAction({
         <ActionTooltip id={id} title={title} {...tooltipExtraProps}>
             <Button
                 onClick={onClick}
-                aria-describedby={id}
                 view="raised"
                 pin="circle-circle"
-                href={href}
+                href={href as string}
                 disabled={disabled}
                 size="s"
-                extraProps={{'aria-label': title, 'aria-describedby': id, ...extraProps}}
+                aria-label={title}
+                aria-describedby={id}
+                {...(extraProps as Omit<ButtonLinkProps, 'href'>)}
             >
                 {icon}
             </Button>
diff --git a/src/components/Palette/Palette.tsx b/src/components/Palette/Palette.tsx
index c8a3469b28..e37e55175a 100644
--- a/src/components/Palette/Palette.tsx
+++ b/src/components/Palette/Palette.tsx
@@ -194,7 +194,7 @@ export const Palette = React.forwardRef<HTMLDivElement, PaletteProps>(function P
                                     title={option.title}
                                     view={isSelected ? 'normal' : 'flat'}
                                     selected={isSelected}
-                                    extraProps={{value: option.value}}
+                                    value={option.value}
                                     size={size}
                                     onClick={() => handleSelection(option)}
                                 >
diff --git a/src/components/PlaceholderContainer/PlaceholderContainer.tsx b/src/components/PlaceholderContainer/PlaceholderContainer.tsx
index 36d920e69c..c9f30c23f1 100644
--- a/src/components/PlaceholderContainer/PlaceholderContainer.tsx
+++ b/src/components/PlaceholderContainer/PlaceholderContainer.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import {Button} from '../Button';
+import type {ButtonProps} from '../Button';
 import {block} from '../utils/cn';
 
 import {componentClassName} from './constants';
@@ -10,19 +11,11 @@ import './PlaceholderContainer.scss';
 
 const b = block(componentClassName);
 
-const PlaceholderContainerAction = (props: PlaceholderContainerActionProps) => {
+const PlaceholderContainerAction = ({text, ...buttonProps}: PlaceholderContainerActionProps) => {
     return (
         <div className={b('action')}>
-            <Button
-                className={b('action-btn')}
-                view={props.view || 'normal'}
-                size={props.size || 'm'}
-                loading={Boolean(props.loading)}
-                disabled={Boolean(props.disabled)}
-                href={props.href}
-                {...(props.onClick ? {onClick: props.onClick} : {})}
-            >
-                {props.text}
+            <Button {...(buttonProps as ButtonProps)} className={b('action-btn')}>
+                {text}
             </Button>
         </div>
     );
diff --git a/src/components/PlaceholderContainer/types.ts b/src/components/PlaceholderContainer/types.ts
index c4fdad608b..db29d420d9 100644
--- a/src/components/PlaceholderContainer/types.ts
+++ b/src/components/PlaceholderContainer/types.ts
@@ -14,8 +14,9 @@ export type PlaceholderContainerImageProps = {
 
 export type PlaceholderContainerActionProps = Pick<
     ButtonProps,
-    'disabled' | 'loading' | 'view' | 'size' | 'href' | 'onClick'
+    'disabled' | 'loading' | 'view' | 'size' | 'onClick'
 > & {
+    href?: string;
     text: string;
 };
 
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index e6926af52d..cc7196f710 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -177,9 +177,7 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
                             size="s"
                             view="flat-secondary"
                             onClick={handleCloseClick}
-                            extraProps={{
-                                'aria-label': 'Close',
-                            }}
+                            aria-label="Close"
                         >
                             <Icon data={Xmark} size={16} />
                         </Button>
diff --git a/src/components/Popover/__stories__/Popover.stories.tsx b/src/components/Popover/__stories__/Popover.stories.tsx
index f95c641b34..d2ee4b3734 100644
--- a/src/components/Popover/__stories__/Popover.stories.tsx
+++ b/src/components/Popover/__stories__/Popover.stories.tsx
@@ -215,11 +215,9 @@ const AccessibleTemplate: StoryFn<PopoverProps> = () => {
             <Base content="Accessible tooltip" tooltipId={tooltipId}>
                 {({onClick, open}) => (
                     <Button
-                        extraProps={{
-                            'aria-controls': open ? tooltipId : undefined,
-                            'aria-describedby': tooltipId,
-                        }}
                         onClick={onClick}
+                        aria-controls={open ? tooltipId : undefined}
+                        aria-describedby={tooltipId}
                     >
                         Tooltip
                     </Button>
@@ -246,11 +244,9 @@ const AccessibleTemplate: StoryFn<PopoverProps> = () => {
                 {({onClick}) => (
                     <Button
                         ref={ref}
-                        extraProps={{
-                            'aria-controls': popoverId,
-                            'aria-describedby': popoverId,
-                            'aria-expanded': openPopover,
-                        }}
+                        aria-controls={popoverId}
+                        aria-describedby={popoverId}
+                        aria-expanded={openPopover}
                         onClick={onClick}
                     >
                         Popover
diff --git a/src/components/Select/__stories__/SelectShowcase.tsx b/src/components/Select/__stories__/SelectShowcase.tsx
index c75fbdc6a2..a33cc1d767 100644
--- a/src/components/Select/__stories__/SelectShowcase.tsx
+++ b/src/components/Select/__stories__/SelectShowcase.tsx
@@ -287,15 +287,13 @@ export const SelectShowcase = (props: SelectProps) => {
                         return (
                             <Button
                                 id={id}
-                                ref={ref}
+                                ref={ref as React.Ref<HTMLButtonElement>}
                                 view="action"
                                 onClick={onClick}
                                 disabled={disabled}
-                                extraProps={{
-                                    ...extraProps,
-                                    'aria-label': extraProps['aria-label'] || 'User control',
-                                }}
+                                aria-label={extraProps['aria-label'] || 'User control'}
                                 className={b({'has-clear': props.hasClear})}
+                                {...extraProps}
                             >
                                 <span className={b('text')}>User control</span>
                                 {renderClear({
@@ -321,21 +319,15 @@ export const SelectShowcase = (props: SelectProps) => {
                     ...props,
                     className: b('user-control-placement'),
                     popupPlacement: ['bottom'],
-                    renderControl: ({
-                        ref,
-                        triggerProps: {onClick, disabled, id, ...extraProps},
-                    }) => {
+                    renderControl: ({ref, triggerProps: {onClick, disabled, ...extraProps}}) => {
                         return (
                             <Button
-                                id={id}
-                                ref={ref}
+                                ref={ref as React.Ref<HTMLButtonElement>}
                                 view="action"
                                 onClick={onClick}
                                 disabled={disabled}
-                                extraProps={{
-                                    ...extraProps,
-                                    'aria-label': extraProps['aria-label'] || 'Add',
-                                }}
+                                aria-label={extraProps['aria-label'] || 'Add'}
+                                {...extraProps}
                             >
                                 <Icon data={Plus} />
                             </Button>
diff --git a/src/components/Table/__stories__/WithTableSettingsCustomActions/WithTableSettingsCustomActions.tsx b/src/components/Table/__stories__/WithTableSettingsCustomActions/WithTableSettingsCustomActions.tsx
index 90c98fcbff..462f441042 100644
--- a/src/components/Table/__stories__/WithTableSettingsCustomActions/WithTableSettingsCustomActions.tsx
+++ b/src/components/Table/__stories__/WithTableSettingsCustomActions/WithTableSettingsCustomActions.tsx
@@ -4,7 +4,7 @@ import {ArrowRotateLeft} from '@gravity-ui/icons';
 import _isEqual from 'lodash/isEqual';
 
 import {Button} from '../../../Button';
-import type {ButtonProps} from '../../../Button';
+import type {ButtonButtonProps} from '../../../Button';
 import {Icon} from '../../../Icon';
 import {Flex} from '../../../layout';
 import type {TableProps} from '../../Table';
@@ -72,11 +72,11 @@ export const WithTableSettingsCustomActionsShowcase = ({
     );
 };
 
-function SelectAllButton<T extends ButtonProps>({onClick}: T) {
+function SelectAllButton<T extends ButtonButtonProps>({onClick}: T) {
     return <Button onClick={onClick}>Select All</Button>;
 }
 
-function ResetButton<T extends ButtonProps>({onClick}: T) {
+function ResetButton<T extends ButtonButtonProps>({onClick}: T) {
     return (
         <Button view="outlined-warning" onClick={onClick}>
             <Flex alignItems="center" gap="1">
diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx
index fa98a84701..b7d6159fef 100644
--- a/src/components/Table/hoc/withTableActions/withTableActions.tsx
+++ b/src/components/Table/hoc/withTableActions/withTableActions.tsx
@@ -181,11 +181,9 @@ const DefaultRowActions = <I extends TableDataItem>({
                 size={rowActionsSize}
                 ref={anchorRef}
                 disabled={disabled}
-                extraProps={{
-                    'aria-label': i18n('label-actions'),
-                    'aria-expanded': isPopupOpen,
-                    'aria-controls': rowId,
-                }}
+                aria-label={i18n('label-actions')}
+                aria-expanded={isPopupOpen}
+                aria-controls={rowId}
             >
                 <Icon data={Ellipsis} />
             </Button>
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
index 90d14ae3b9..5701711c2d 100644
--- a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
+++ b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -384,7 +384,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
         return (
             renderSwitcher?.({onClick: toggleOpen, onKeyDown}) || (
-                <Button onClick={toggleOpen} extraProps={{onKeyDown}}>
+                <Button onClick={toggleOpen} onKeyDown={onKeyDown}>
                     <Icon data={Gear} />
                     {i18n('button_switcher')}
                 </Button>
diff --git a/src/components/Table/hoc/withTableSettings/withTableSettings.tsx b/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
index 506be20b95..b839c68f74 100644
--- a/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
+++ b/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
@@ -221,7 +221,7 @@ export function withTableSettings<I extends TableDataItem, E extends {} = {}>(
                                     <Button
                                         view="flat"
                                         className={b('settings-button')}
-                                        extraProps={{'aria-label': i18n('label_settings')}}
+                                        aria-label={i18n('label_settings')}
                                         onClick={onClick}
                                     >
                                         <Icon data={Gear} />
diff --git a/src/components/Toaster/Toast/Toast.tsx b/src/components/Toaster/Toast/Toast.tsx
index 59f6f53133..a917d7ae90 100644
--- a/src/components/Toaster/Toast/Toast.tsx
+++ b/src/components/Toaster/Toast/Toast.tsx
@@ -128,7 +128,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastUnitedProps>(function
                         view="flat"
                         className={b('btn-close')}
                         onClick={handleClose}
-                        extraProps={{'aria-label': i18n('label_close-button')}}
+                        aria-label={i18n('label_close-button')}
                     >
                         <Icon data={Xmark} />
                     </Button>
diff --git a/src/components/Tooltip/__stories__/Tooltip.stories.tsx b/src/components/Tooltip/__stories__/Tooltip.stories.tsx
index 5233c03d41..1e3a9c4ebc 100644
--- a/src/components/Tooltip/__stories__/Tooltip.stories.tsx
+++ b/src/components/Tooltip/__stories__/Tooltip.stories.tsx
@@ -16,7 +16,7 @@ export const Default: Story = {
     render: (args) => {
         return (
             <Tooltip {...args}>
-                <Button extraProps={{'aria-describedby': args.id}}>Hover to see tooltip</Button>
+                <Button aria-describedby={args.id}>Hover to see tooltip</Button>
             </Tooltip>
         );
     },
diff --git a/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx b/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx
index ccf3edcc9f..5280297ca5 100644
--- a/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx
+++ b/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx
@@ -91,11 +91,11 @@ export const WithGroupSelectionAndCustomIconStory = ({
                                                 [id]: !prevExpandedState[id],
                                             }));
                                         }}
-                                        extraProps={{
-                                            'aria-label': itemProps.content.expanded
+                                        aria-label={
+                                            itemProps.content.expanded
                                                 ? closeButtonLabel
-                                                : expandButtonLabel,
-                                        }}
+                                                : expandButtonLabel
+                                        }
                                     >
                                         <Button.Icon>
                                             <ListItemExpandIcon
diff --git a/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx b/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx
index 7476132492..bcbd6c8518 100644
--- a/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx
+++ b/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx
@@ -71,9 +71,7 @@ export const WithItemLinksAndActionsStory = (props: WithItemLinksAndActionsStory
                                             },
                                         ]}
                                         defaultSwitcherProps={{
-                                            extraProps: {
-                                                'aria-label': moreOptionsButton,
-                                            },
+                                            'aria-label': moreOptionsButton,
                                         }}
                                     />
                                 ),
@@ -90,11 +88,11 @@ export const WithItemLinksAndActionsStory = (props: WithItemLinksAndActionsStory
                                                 [id]: !prevExpandedState[id],
                                             }));
                                         }}
-                                        extraProps={{
-                                            'aria-label': itemProps.content.expanded
+                                        aria-label={
+                                            itemProps.content.expanded
                                                 ? closeButtonLabel
-                                                : expandButtonLabel,
-                                        }}
+                                                : expandButtonLabel
+                                        }
                                     >
                                         <Button.Icon>
                                             <ListItemExpandIcon
diff --git a/src/components/controls/PasswordInput/PasswordInput.tsx b/src/components/controls/PasswordInput/PasswordInput.tsx
index 3f841596dd..3badca37c5 100644
--- a/src/components/controls/PasswordInput/PasswordInput.tsx
+++ b/src/components/controls/PasswordInput/PasswordInput.tsx
@@ -87,12 +87,10 @@ export const PasswordInput = (props: PasswordInputProps) => {
                         disabled={props.disabled}
                         onClick={() => setRevealValue(!revealValue)}
                         size={actionButtonSize}
-                        extraProps={{
-                            'aria-label': revealValue
-                                ? i18n('label_hide-password')
-                                : i18n('label_show-password'),
-                            onMouseDown: (event: React.SyntheticEvent) => event.preventDefault(),
-                        }}
+                        onMouseDown={(event: React.SyntheticEvent) => event.preventDefault()}
+                        aria-label={
+                            revealValue ? i18n('label_hide-password') : i18n('label_show-password')
+                        }
                     >
                         <Icon data={revealValue ? EyeSlash : Eye} size={iconSize} />
                     </Button>
diff --git a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
index 49e6a137f3..cc8bad8fef 100644
--- a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
+++ b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
@@ -34,7 +34,7 @@ const EyeButton = (props: {
             view="flat"
             disabled={disabled}
             onClick={onClick}
-            extraProps={{'aria-label': opened ? showLabel : hideLabel}}
+            aria-label={opened ? showLabel : hideLabel}
         >
             <Icon data={opened ? Eye : EyeSlash} />
         </Button>
diff --git a/src/components/controls/common/ClearButton/ClearButton.tsx b/src/components/controls/common/ClearButton/ClearButton.tsx
index 7869dfc5b5..70f5344a83 100644
--- a/src/components/controls/common/ClearButton/ClearButton.tsx
+++ b/src/components/controls/common/ClearButton/ClearButton.tsx
@@ -58,10 +58,8 @@ export const ClearButton = (props: Props) => {
             size={size}
             className={b(null, className)}
             onClick={onClick}
-            extraProps={{
-                onMouseDown: preventDefaultHandler,
-                'aria-label': i18n('label_clear-button'),
-            }}
+            onMouseDown={preventDefaultHandler}
+            aria-label={i18n('label_clear-button')}
         >
             <Icon data={Xmark} size={ICON_SIZE} />
         </Button>
diff --git a/src/components/lab/NumberInput/NumericArrows/NumericArrows.tsx b/src/components/lab/NumberInput/NumericArrows/NumericArrows.tsx
index 6423620840..0ebc64aba3 100644
--- a/src/components/lab/NumberInput/NumericArrows/NumericArrows.tsx
+++ b/src/components/lab/NumberInput/NumericArrows/NumericArrows.tsx
@@ -33,16 +33,14 @@ export function NumericArrows({
     onDownClick,
     ...restProps
 }: NumericArrowsProps) {
-    const commonBtnProps: Partial<ButtonProps> = {
+    const commonBtnProps: ButtonProps = {
         size: 's',
         pin: 'brick-brick',
         view: 'flat-secondary',
         disabled,
         tabIndex: -1,
         width: 'max',
-        extraProps: {
-            'aria-hidden': 'true',
-        },
+        'aria-hidden': 'true',
     };
 
     return (
@@ -57,7 +55,7 @@ export function NumericArrows({
                 qa={INCREMENT_BUTTON_QA}
                 {...commonBtnProps}
                 onClick={onUpClick}
-                extraProps={{'aria-label': i18n('label_increment')}}
+                aria-label={i18n('label_increment')}
             >
                 <Icon data={ChevronUp} size={12} />
             </Button>
@@ -67,7 +65,7 @@ export function NumericArrows({
                 qa={DECREMENT_BUTTON_QA}
                 {...commonBtnProps}
                 onClick={onDownClick}
-                extraProps={{'aria-label': i18n('label_decrement')}}
+                aria-label={i18n('label_decrement')}
             >
                 <Icon data={ChevronDown} size={12} />
             </Button>
diff --git a/src/components/useList/components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories.tsx b/src/components/useList/components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories.tsx
index 3ab02f8b70..2b8b0d84f9 100644
--- a/src/components/useList/components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories.tsx
+++ b/src/components/useList/components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories.tsx
@@ -27,7 +27,7 @@ const InsideButtonExample = (props: ListItemExpandIconProps) => {
     const [expanded, setExpanded] = React.useState(false);
 
     return (
-        <Button extraProps={{'aria-label': 'toggle-button'}} onClick={() => setExpanded((x) => !x)}>
+        <Button aria-label="Toggle Button" onClick={() => setExpanded((x) => !x)}>
             <Button.Icon>
                 <ListItemExpandIcon {...props} expanded={expanded} />
             </Button.Icon>
diff --git a/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx b/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx
index 8a15acb845..43b0d1f840 100644
--- a/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx
+++ b/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx
@@ -64,9 +64,7 @@ const EndSlot = ({selfStart}: {selfStart?: boolean}) => (
                 },
             ]}
             defaultSwitcherProps={{
-                extraProps: {
-                    'aria-label': 'Actions',
-                },
+                'aria-label': 'Actions',
             }}
         />
     </Flex>
@@ -255,7 +253,7 @@ const stories: ListItemViewProps[] = [
             expanded: false,
             expandIconPlacement: 'end',
             renderExpandIcon: (props) => (
-                <Button view="flat" extraProps={{'aria-label': 'toggle-button'}}>
+                <Button view="flat" aria-label="Toggle Button">
                     <Button.Icon>
                         <ListItemExpandIcon {...props} />
                     </Button.Icon>
diff --git a/src/demo/colors/ColorPanel.tsx b/src/demo/colors/ColorPanel.tsx
index be958c2dc7..3260f59e25 100644
--- a/src/demo/colors/ColorPanel.tsx
+++ b/src/demo/colors/ColorPanel.tsx
@@ -70,9 +70,7 @@ export function ColorPanel(props: ColorPanelProps) {
                     }
                     className="color-panel__bg-switcher"
                     onClick={() => rotateBackground()}
-                    extraProps={{
-                        'aria-labelledby': tooltipId,
-                    }}
+                    aria-labelledby={tooltipId}
                 >
                     <Icon data={Bulb} />
                 </Button>
diff --git a/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx b/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx
index 018c20c563..fb16b5330b 100644
--- a/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx
+++ b/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx
@@ -113,9 +113,7 @@ export function BrandingConfigurator({theme}: BrandingConfiguratorProps) {
                         view="outlined"
                         size="xl"
                         onClick={handleRandomClick}
-                        extraProps={{
-                            'aria-label': 'Regenerate colors',
-                        }}
+                        aria-label="Regenerate colors"
                     >
                         <Icon data={ArrowsRotateRight} size={20} />
                     </Button>
diff --git a/src/stories/Branding/PaletteGenerator/PaletteGenerator.tsx b/src/stories/Branding/PaletteGenerator/PaletteGenerator.tsx
index cc71894d69..fd2b54048d 100644
--- a/src/stories/Branding/PaletteGenerator/PaletteGenerator.tsx
+++ b/src/stories/Branding/PaletteGenerator/PaletteGenerator.tsx
@@ -179,9 +179,7 @@ export function PaletteGenerator({theme}: BrandingConfiguratorProps) {
                         view="outlined"
                         size="l"
                         onClick={handleSwapContrastClick}
-                        extraProps={{
-                            'aria-label': 'Switch colors',
-                        }}
+                        aria-label="Switch colors"
                     >
                         <Icon data={ArrowUpArrowDown} size={18} />
                     </Button>