Telegram Keyboard Button Styling

For Telegram bots, you can customize the color of keyboard buttons. This lets you visually highlight important actions and improve scenario UX.

Context and Problem

Many scenarios need a visually clear interface for Telegram users:

Highlight the main action (e.g., "Book appointment")
Mark negative or destructive actions (e.g., "Cancel")
Emphasize successful completion (e.g., "Confirm")

Telegram button styling addresses this by letting you choose the color for each button.

Main Concepts

Available Colors

Telegram supports three button styles:

Style	Color	Purpose
primary	Blue	Main action, primary option
success	Green	Confirmation, successful actions
danger	Red	Cancellation, destructive actions

Scope

Channel: Telegram only
Keyboard types: inline keyboard and regular (reply) keyboard
Widget and Viber: button styles are not supported

JSON Configuration Format

The button style is set in the button's json field via the telegram.style object.

Minimal Example

Button with blue style (primary):

{
  "telegram": {
    "style": "primary"
  }
}

Combined with Other Parameters

The style can be combined with other button settings:

Link button with green style:

{
  "ActionType": "open-url",
  "ActionBody": "https://example.com/booking",
  "telegram": {
    "style": "success"
  }
}

Transition button with red style (for cancellation):

{
  "ActionType": "reply",
  "ActionBody": "Cancel",
  "telegram": {
    "style": "danger"
  }
}

Multiple styles in one message block:

Each button has its own json field. For example, three buttons with different styles:

Button 1 — {"telegram": {"style": "primary"}}
Button 2 — {"telegram": {"style": "success"}}
Button 3 — {"telegram": {"style": "danger"}}

Allowed Values

Value	Description
`primary`	Blue button
`success`	Green button
`danger`	Red button
(empty)	Default appearance (no color)

If another value is specified or the field is missing — the button uses the default appearance.

How to Configure in Scenario Builder

Open a "Message with keyboard" block or another block with buttons.
In each button section, find the Style field.
Select the desired style from the dropdown: Primary, Success, or Danger.
Changes are saved automatically to the button's JSON configuration.

The style is stored in the button's json field in the format {"telegram": {"style": "..."}}.

Implications for Users and Implementation

For Integrators

When using button styling in Telegram:

Check the channel — styles work only for Telegram
Use semantics — primary for main actions, danger for cancellation
Avoid overload — too many colored buttons reduces readability

Common Mistakes

Issue: Button does not change color
Cause: Channel is not Telegram or incorrect JSON format
Solution: Ensure the scenario is sent to Telegram and that telegram.style contains one of the allowed values

Issue: Style ignored on older clients
Cause: Very old Telegram versions may not support styles
Solution: In such cases, the button is displayed with the default appearance

Limitations

Styles work only for the Telegram channel
Only three styles are allowed: primary, success, danger
Widget and Viber do not support button styling

Explanation: Inline keyboard in Telegram and Widget — button action types and configuration
Explanation: Viber keyboard styling — similar feature for Viber
Explanation: Telegram Web App — using web apps in Telegram