Back Button

The 💠component responsible for the Telegram Mini Apps back button.

Checking Support

To check if the back button is supported by the current Telegram Mini Apps version, use the isSupported method:

Variable

import { backButton } from '@telegram-apps/sdk';

backButton.isSupported(); // boolean

Functions

import { isBackButtonSupported } from '@telegram-apps/sdk';

isBackButtonSupported(); // boolean

Mounting

Before using this component, it is necessary to mount it to work with properly configured properties. To do so, use the mount method. It will update the isMounted signal property.

Variable

import { backButton } from '@telegram-apps/sdk';

if (backButton.mount.isAvailable()) {
  backButton.mount();
  backButton.isMounted(); // true
}

Functions

import { mountBackButton, isBackButtonMounted } from '@telegram-apps/sdk';

if (mountBackButton.isAvailable()) {
  mountBackButton();
  isBackButtonMounted(); // true
}

To unmount, use the unmount method:

Variable

backButton.unmount();
backButton.isMounted(); // false

Functions

import { unmountBackButton, isBackButtonMounted } from '@telegram-apps/sdk';

unmountBackButton();
isBackButtonMounted(); // false

Showing and Hiding

To change the button's visibility, use the hide() and show() methods. These methods update the isVisible signal property value.

Variable

if (backButton.show.isAvailable()) {
  backButton.show();
  backButton.isVisible(); // true
}

if (backButton.hide.isAvailable()) {
  backButton.hide();
  backButton.isVisible(); // false
}

Functions

import {
  showBackButton,
  hideBackButton,
  isBackButtonVisible,
} from '@telegram-apps/sdk';

if (showBackButton.isAvailable()) {
  showBackButton();
  isBackButtonVisible(); // true
}

if (hideBackButton.isAvailable()) {
  hideBackButton();
  isBackButtonVisible(); // false
}

Tracking Click

To add a button click listener, use the onClick method. It returns a function to remove the bound listener. Alternatively, you can use the offClick method.

Variable

if (backButton.onClick.isAvailable()) {
  function listener() {
    console.log('Clicked!');
  }

  const offClick = backButton.onClick(listener);
  offClick();
  // or
  backButton.onClick(listener);
  backButton.offClick(listener);
}

Functions

import { onBackButtonClick, offBackButtonClick } from '@telegram-apps/sdk';

if (onBackButtonClick.isAvailable()) {
  function listener() {
    console.log('Clicked!');
  }

  const offClick = onBackButtonClick(listener);
  offClick();
  // or
  onBackButtonClick(listener);
  offBackButtonClick(listener);
}