diff --git a/apps/docs/.vitepress/packages.ts b/apps/docs/.vitepress/packages.ts
index 8eacad5fc..a409e5318 100644
--- a/apps/docs/.vitepress/packages.ts
+++ b/apps/docs/.vitepress/packages.ts
@@ -106,6 +106,10 @@ export const packagesSidebar = {
                   text: 'QRScanner',
                   link: prefixed('/typescript/tma-js-sdk/components/qr-scanner'),
                 },
+                {
+                  text: 'SettingsButton',
+                  link: prefixed('/typescript/tma-js-sdk/components/settings-button'),
+                },
                 {
                   text: 'ThemeParams',
                   link: prefixed('/typescript/tma-js-sdk/components/theme-params'),
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/settings-button.md b/apps/docs/packages/typescript/tma-js-sdk/components/settings-button.md
new file mode 100644
index 000000000..f669e39d0
--- /dev/null
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/settings-button.md
@@ -0,0 +1,52 @@
+# `SettingsButton`
+
+Implements Telegram Mini Apps [Settings Button](../../../../platform/ui/settings-button.md).
+
+## Initialization
+
+Component constructor accepts visibility state, Telegram Mini Apps version and optional function
+to call Telegram Mini Apps methods.
+
+```typescript
+import { SettingsButton, postEvent } from '@tma.js/sdk';
+
+const settingsButton = new SettingsButton(false, '6.3', postEvent);  
+```  
+
+## Showing and hiding
+
+To show and hide the `SettingsButton`, it is required to use `show()` and `hide()` methods. These
+methods update the button's `isVisible` property:
+
+```typescript  
+settingsButton.show();
+console.log(settingsButton.isVisible); // true  
+
+settingsButton.hide();
+console.log(settingsButton.isVisible); // false  
+```  
+
+## Events
+
+List of events, which could be used in `on` and `off` component instance methods:
+
+| Event            | Listener                   | Triggered when                 |
+|------------------|----------------------------|--------------------------------|
+| click            | `() => void`               | Settings Button was clicked    |
+| change           | `() => void`               | Something in component changed |
+| change:isVisible | `(value: boolean) => void` | `isVisible` property changed   |
+
+## Methods support
+
+List of methods, which could be used in `supports` component instance method:
+
+- `show`
+- `hide`
+
+```typescript
+import { SettingsButton } from '@tma.js/sdk';
+
+const settingsButton = new SettingsButton(...);
+settingsButton.supports('show');
+settingsButton.supports('hide');
+```