# 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):

```json
{
  "telegram": {
    "style": "primary"
  }
}
```

### Combined with Other Parameters

The style can be combined with other button settings:

**Link button with green style:**

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

**Transition button with red style (for cancellation):**

```json
{
  "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

1. Open a "Message with keyboard" block or another block with buttons.
2. In each button section, find the **Style** field.
3. Select the desired style from the dropdown: *Primary*, *Success*, or *Danger*.
4. 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:

1. **Check the channel** — styles work only for Telegram
2. **Use semantics** — primary for main actions, danger for cancellation
3. **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

## Related Documents

- **Explanation:** [Inline keyboard in Telegram and Widget](/en/scenariodialog/explanation/inline-keyboard.md) — button action types and configuration
- **Explanation:** [Viber keyboard styling](/en/scenariodialog/explanation/viber-keyboard-styling.md) — similar feature for Viber
- **Explanation:** [Telegram Web App](/en/scenariodialog/explanation/telegram-webapp.md) — using web apps in Telegram