From 8ce1c9a39af2f8e83ca7576b5f0ce60a33a85f37 Mon Sep 17 00:00:00 2001
From: Igor Danchenko <64441155+igordanchenko@users.noreply.github.com>
Date: Wed, 14 Aug 2024 07:46:24 -0400
Subject: [PATCH] docs: add custom label example

---
 docs/advanced.md | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/advanced.md b/docs/advanced.md
index 0ff87d9..7c7ba66 100644
--- a/docs/advanced.md
+++ b/docs/advanced.md
@@ -140,14 +140,30 @@ augmentations are applied before the lightbox starts rendering.
 
 For example, you can add a toolbar button using the following augmentation:
 
-```jsx
-import { addToolbarButton } from "yet-another-react-lightbox";
+```tsx
+import { addToolbarButton, IconButton } from "yet-another-react-lightbox";
+
+declare module "yet-another-react-lightbox" {
+  interface Labels {
+    "My button"?: string;
+  }
+}
 
 // ...
 
 function MyPlugin({ augment }) {
   augment(({ toolbar, ...restProps }) => ({
-    toolbar: addToolbarButton(toolbar, "my-button", <MyButton />),
+    toolbar: addToolbarButton(
+      toolbar,
+      "my-button",
+      <IconButton
+        icon={MyIcon}
+        label="My button"
+        onClick={() => {
+          // ...
+        }}
+      />,
+    ),
     ...restProps,
   }));
 }