# Handle underTheMessage keyboard button click by Alert or Toast

## Handling click on underTheMessage keyboard button

If you want to handle when user clicks on **underTheMessage keyboard button**, you can use `@OnClick` decorator for method and pass button id to it. 

{% hint style="info" %}
@OnClick takes argument: button id you want to listen to the click
{% endhint %}

You can also send **alert** or **toast** using **class-method**: **Alert** and **Toast**

#### Alert/Toast class-method takes arguments:

<table><thead><tr><th width="200.21971252566738" data-type="number">Argument</th><th>Description</th><th>Required</th></tr></thead><tbody><tr><td>1</td><td>Text of the Alert/Toast</td><td><strong>Required</strong></td></tr><tr><td>2</td><td><a href="https://core.telegram.org/bots/api#answercallbackquery">Options</a></td><td>Optional</td></tr></tbody></table>

{% code title="app.controller.ts" %}

```typescript
import { Controller, Keyboard, KeyboardTypes, MessageSend, OnCommand, OnClick, Alert, Toast } from 'nestgram';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService?: AppService) {}

  @OnCommand('start')
  async start(): Promise<MessageSend> {
    return new MessageSend(
      'underTheMessage (or inline_keyboard) keyboard example',
      new Keyboard(KeyboardTypes.underTheMessage) // keyboard type
        .btn('Button', 'buttonId')
        .btn('Button 2', 'buttonId2'), // row is created automatically
    );
  }
  
  @OnClick('buttonId')
  async buttonClick(): Promise<Alert> {
    return new Alert('Hello!');
  }
  
  @OnClick('buttonId2')
  async secondButtonClick(): Promise<Toast> {
    return new Toast('World!');
  }
}
```

{% endcode %}

You can also use a **RegExp expression** in the `@OnClick` decorator to handle clicks with params