docs: 📝 Edit single button color

apps/docs/docs/editor/theme.md

@@ -25,3 +25,21 @@ For example, if I want my buttons to be more rounded, and have a fancy gradient
   src="/img/theme/fancy-button.png"
   alt="Fancy button"
 />
+
+### Customize a single button color
+
+Thanks to custom CSS, you can customize the color of a single button for example by using the `data-itemid` attribute:
+
+```css
+[data-itemid='cl3iunm4p000f2e6gfr8cznnn'] {
+  background-color: gray;
+  border-color: gray;
+}
+```
+
+To find the item ID of a button, right-click on the button and inspect the element:
+
+<img
+    src="/img/theme/button-inspect.png"
+    alt="Button inspect"
+  />

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/ChoiceForm.tsx

@@ -54,6 +54,7 @@ export const ChoiceForm = ({ step, onSubmit }: ChoiceFormProps) => {
                   : 'selectable')
               }
               data-testid="button"
+              data-itemid={item.id}
             >
               {item.content}
             </button>