Кнопки Telegram

Изучите MainButton и BackButton — нативные элементы UI Telegram, управляемые через WebApp API. Эти кнопки появляются в интерфейсе Telegram, а не в вашем веб-контенте.

MainButton

The MainButton is a prominent button at the bottom of the Mini App. It's controlled by the WebApp API and appears in the Telegram interface.

Status: Hidden

Button Text

Button Color

Text Color

MainButton Clicks

Show code

import * as tg from './lib/tg';

// Show MainButton
tg.setMainButtonParams({
  text: 'Click Me!',
  color: '#6366f1',
  text_color: '#ffffff',
  is_active: true,
  is_visible: true,
});
tg.showMainButton();

// Handle clicks
tg.onMainButtonClick(() => {
  console.log('MainButton clicked!');
  tg.hapticImpact('medium');
});

// Update text
tg.setMainButtonText('New Text');

// Hide button
tg.hideMainButton();

BackButton

The BackButton appears in the Mini App header and provides navigation functionality.

Status: Hidden

BackButton Clicks

Show code

import * as tg from './lib/tg';

// Show BackButton
tg.showBackButton();

// Handle clicks
tg.onBackButtonClick(() => {
  console.log('BackButton clicked!');
  tg.hapticImpact('light');
});

// Hide button
tg.hideBackButton();