UI Components

Mini Apps provide multiple native UI components accessible through the Telegram.WebApp object.

BackButton

The back button, displayed on the left side of the Mini App header bar.

Properties

Property	Type	Description
isVisible	Boolean	Whether the back button is currently visible

Methods

Method	Description
show()	Show the back button
hide()	Hide the back button
onClick(callback)	Register a click event callback
offClick(callback)	Remove a click event callback

Example

const backButton = Telegram.WebApp.BackButton;

backButton.show();
backButton.onClick(() => {
  // Handle back navigation
  window.history.back();
});

BottomButton

Bottom button component, including the main button (MainButton) and secondary button (SecondaryButton).

MainButton is a full-width button at the bottom of the Mini App, commonly used for submit or confirm actions. SecondaryButton was introduced in Bot API 7.10+.

Properties

Property	Type	Description
type	String	Button type: "main" or "secondary"
text	String	Text displayed on the button (max 64 characters)
color	String	Button background color
textColor	String	Button text color
isVisible	Boolean	Whether the button is visible
isActive	Boolean	Whether the button is clickable
hasShineEffect	Boolean	Whether the button displays a shine effect. Bot API 7.10+
position	String	Button position: "left", "right", "top", "bottom". Bot API 7.10+
isProgressVisible	Boolean	Whether a loading progress indicator is shown

Methods

Method	Description
setText(text)	Set the button text
show()	Show the button
hide()	Hide the button
enable()	Enable the button
disable()	Disable the button
showProgress(leaveActive)	Show loading progress. When leaveActive is true, the button remains clickable
hideProgress()	Hide loading progress
setParams(params)	Set button parameters in batch
onClick(callback)	Register a click event callback
offClick(callback)	Remove a click event callback

setParams

Telegram.WebApp.MainButton.setParams({
  text: 'Submit',
  color: '#2481cc',
  text_color: '#ffffff',
  has_shine_effect: true,
  is_active: true,
  is_visible: true
})

Parameter	Type	Required	Description
text	String	No	Button text
color	String	No	Button background color
text_color	String	No	Text color
has_shine_effect	Boolean	No	Whether to show shine effect
position	String	No	Button position (SecondaryButton only)
is_active	Boolean	No	Whether clickable
is_visible	Boolean	No	Whether visible

Example

const mainButton = Telegram.WebApp.MainButton;

mainButton.setText('Confirm Payment');
mainButton.color = '#31b545';
mainButton.textColor = '#ffffff';

mainButton.onClick(() => {
  mainButton.showProgress();
  // Handle payment logic...
  setTimeout(() => {
    mainButton.hideProgress();
  }, 2000);
});

mainButton.show();

SettingsButton

Settings button displayed in the Mini App's more menu. Bot API 7.0+

Properties

Property	Type	Description
isVisible	Boolean	Whether the settings button is visible

Methods

Method	Description
show()	Show the settings button
hide()	Hide the settings button
onClick(callback)	Register a click event callback
offClick(callback)	Remove a click event callback

Example

const settingsButton = Telegram.WebApp.SettingsButton;

settingsButton.show();
settingsButton.onClick(() => {
  // Navigate to settings
  navigateTo('/settings');
});

HapticFeedback

Haptic feedback controller providing three types of vibration feedback.

Methods

impactOccurred

Telegram.WebApp.HapticFeedback.impactOccurred(style)

Triggers impact-type haptic feedback.

Parameter	Type	Required	Description
style	String	Yes	Impact intensity: "light", "medium", "heavy", "rigid", "soft"

notificationOccurred

Telegram.WebApp.HapticFeedback.notificationOccurred(type)

Triggers notification-type haptic feedback.

Parameter	Type	Required	Description
type	String	Yes	Notification type: "error", "success", "warning"

selectionChanged

Telegram.WebApp.HapticFeedback.selectionChanged()

Triggers selection-change haptic feedback, typically used when the user changes a selection.

Example

const haptic = Telegram.WebApp.HapticFeedback;

// Button click feedback
document.getElementById('btn').addEventListener('click', () => {
  haptic.impactOccurred('medium');
});

// Success feedback
function onSuccess() {
  haptic.notificationOccurred('success');
}

// Selection change feedback
document.querySelectorAll('.option').forEach(el => {
  el.addEventListener('click', () => {
    haptic.selectionChanged();
  });
});