diff --git a/docs/interfaces/SettingsButtonProps.md b/docs/interfaces/SettingsButtonProps.md
new file mode 100644
index 0000000..609273c
--- /dev/null
+++ b/docs/interfaces/SettingsButtonProps.md
@@ -0,0 +1,27 @@
+[@vkruglikov/react-telegram-web-app](../README.md) / SettingsButtonProps
+
+# Interface: SettingsButtonProps
+
+The props type of [`SettingsButton`](../README.md#settingsbutton).
+
+## Table of contents
+
+### Properties
+
+- [onClick](SettingsButtonProps.md#onclick)
+
+## Properties
+
+### onClick
+
+• `Optional` **onClick**: () => `void`
+
+#### Type declaration
+
+▸ (): `void`
+
+The settings button press event handler
+
+##### Returns
+
+`void`
diff --git a/src/SettingsButton.tsx b/src/SettingsButton.tsx
new file mode 100644
index 0000000..5c8de48
--- /dev/null
+++ b/src/SettingsButton.tsx
@@ -0,0 +1,34 @@
+import { useContext, useEffect, useId } from 'react';
+import { useWebApp, useSmoothButtonsTransition, systemContext } from './core';
+
+export interface SettingsButtonProps {
+  onClick?: () => void;
+}
+
+const SettingsButton = ({ onClick }: SettingsButtonProps): null => {
+  const system = useContext(systemContext);
+  const buttonId = useId();
+  const WebApp = useWebApp();
+
+  useEffect(() => {
+    if (!onClick || !WebApp?.SettingsButton) {
+      return;
+    }
+
+    WebApp.SettingsButton.onClick(onClick);
+    return () => {
+      WebApp.SettingsButton.offClick(onClick);
+    };
+  }, [onClick, WebApp]);
+
+  useSmoothButtonsTransition({
+    show: WebApp?.SettingsButton?.show,
+    hide: WebApp?.SettingsButton?.hide,
+    currentShowedIdRef: system.SettingsButton,
+    id: buttonId,
+  });
+
+  return null;
+};
+
+export default SettingsButton;
diff --git a/src/WebAppProvider.tsx b/src/WebAppProvider.tsx
index 400aabe..aa393e5 100644
--- a/src/WebAppProvider.tsx
+++ b/src/WebAppProvider.tsx
@@ -62,6 +62,7 @@ const WebAppProvider = ({
     const forceHideButtons = () => {
       globalWebApp?.MainButton?.hide();
       globalWebApp?.BackButton?.hide();
+      globalWebApp?.SettingsButton?.hide();
     };
 
     window.addEventListener('beforeunload', forceHideButtons);
diff --git a/src/core/context.ts b/src/core/context.ts
index 81f2909..2eec51e 100644
--- a/src/core/context.ts
+++ b/src/core/context.ts
@@ -38,11 +38,13 @@ export const optionsContext = createContext<Options>(DEFAULT_OPTIONS);
 type SystemContext = {
   MainButton: MutableRefObject<null | string>;
   BackButton: MutableRefObject<null | string>;
+  SettingsButton: MutableRefObject<null | string>;
 };
 
 export const createSystemContextValue = () => ({
   MainButton: { current: null },
   BackButton: { current: null },
+  SettingsButton: { current: null },
 });
 
 export const systemContext = createContext<SystemContext>(
diff --git a/src/index.ts b/src/index.ts
index 98f7710..58c0269 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,9 @@
 export { default as MainButton, MainButtonProps } from './MainButton';
 export { default as BackButton, BackButtonProps } from './BackButton';
+export {
+  default as SettingsButton,
+  SettingsButtonProps,
+} from './SettingsButton';
 export {
   default as useShowPopup,
   ShowPopupFunction,