diff --git a/docs/content/interactions/_category_.yml b/docs/content/interactions/_category_.yml
new file mode 100644
index 0000000..5f6bf0c
--- /dev/null
+++ b/docs/content/interactions/_category_.yml
@@ -0,0 +1,4 @@
+label: 'Interactions'
+position: 4
+collapsible: true
+collapsed: false
diff --git a/docs/content/interactions/interaction-components.md b/docs/content/interactions/interaction-components.md
new file mode 100644
index 0000000..55c3baa
--- /dev/null
+++ b/docs/content/interactions/interaction-components.md
@@ -0,0 +1,51 @@
+---
+id: message-interactions
+
+title: Message Interactions
+
+sidebar_position: 3
+---
+
+**Message interactions** — we'll call them "interaction" moving forward—are a framework for adding interactive elements to the messages your app or bot sends. They're accessible, customizable, and easy to use.
+
+There are several different types of interactions; this documentation will outline the basics of this new framework and each example.
+
+## Button
+
+**Buttons** are interactive components that render on messages. They can be clicked by users, and send an interaction to your app when clicked.
+
+<img src="/img/content/button.jpg" alt="Buttons" width="500" />
+
+```typescript title="src/app.components.ts"
+import { Injectable } from '@nestjs/common';
+import { Context, Button, ButtonContext, ComponentParam, On, TextCommandContext } from '@nestgramjs/core';
+import { Markup, Telegraf } from 'telegraf';
+
+@Injectable()
+export class AppService {
+  @TextCommand({
+    name: 'start',
+    description: 'Displays this help message.',
+  })
+  onStart(@Context() [ctx]: TextCommandContext) {
+    const inlineKeyboard = Markup.inlineKeyboard([
+      {
+        text: 'Button 1',
+        callback_data: 'nestgram/button1',
+      },
+      {
+        text: 'Button 2',
+        callback_data: 'nestgram/button2',
+      },
+    ])
+
+    ctx.reply('Start message', inlineKeyboard);
+  }
+
+  @Button('nestgram/:name')
+  async handleClickButton(@Context() ctx: ButtonContext, @ComponentParam('name') name: string) {
+    await ctx.reply(`clicked on ${name}`);
+  }
+}
+```
+
diff --git a/docs/static/img/content/button.jpg b/docs/static/img/content/button.jpg
new file mode 100644
index 0000000..3916b26
Binary files /dev/null and b/docs/static/img/content/button.jpg differ
diff --git a/examples/inline-keyboard/src/app.service.ts b/examples/inline-keyboard/src/app.service.ts
index ee62d16..c9cee56 100755
--- a/examples/inline-keyboard/src/app.service.ts
+++ b/examples/inline-keyboard/src/app.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common';
-import { Button, ButtonContext, ComponentParam, On } from '../../../packages/core';
-import { CommandContext, Context, ContextOf } from '../../../packages/core';
+import { Button, ButtonContext, ComponentParam, On, TextCommandContext } from '../../../packages/core';
+import { Context, ContextOf } from '../../../packages/core';
 import { Markup, Telegraf } from 'telegraf';
 import { TextCommand } from '../../../packages/core';