From 6f439e563b62819122a28c8f7ff2010bcd08d2fc Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Sun, 9 Jan 2022 01:44:33 -0600
Subject: [PATCH] button guide

---
 packages/docs/src/guides/buttons.md | 38 ++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/guides/buttons.md b/packages/docs/src/guides/buttons.md
index e20136a..2dce5ed 100644
--- a/packages/docs/src/guides/buttons.md
+++ b/packages/docs/src/guides/buttons.md
@@ -6,4 +6,40 @@ description: Using button components
 
 # Buttons
 
-todo
+Use the `<Button />` component to create a message with a button, and use the `onClick` callback to respond to button clicks.
+
+```jsx
+import { Button } from "reacord"
+
+function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      You've clicked the button {count} times.
+      <Button label="+1" onClick={() => setCount(count + 1)} />
+    </>
+  )
+}
+```
+
+The `onClick` callback receives an `event` object. It includes some information, such as the user who clicked the button, and a function for creating new replies in response.
+
+```jsx
+import { Button } from "reacord"
+
+function TheButton() {
+  return (
+    <Button
+      label="click me i dare you"
+      onClick={(event) => {
+        const name = event.guild.member.displayName || event.user.username
+        event.reply(`${name} clicked the button. wow`)
+        event.ephemeralReply("good job, you clicked it")
+      }}
+    />
+  )
+}
+```
+
+See the [API reference](/api) for more information.