@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/feedback.json

@@ -0,0 +1,269 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:51.559Z",
+    "source": "https://uikit.developers.rio.cloud/#components/feedback",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/feedback",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "d7bb1380a5cd9c708c7579ed7849eafe0d4dbafaf58a8c8a35778c29ca5db2d7"
+  },
+  "title": "FeedbackRating",
+  "lead": null,
+  "content": [
+    {
+      "heading": "FeedbackRating",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Extremely dissatisfied",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"FeedbackRating\"><div class=\"text-medium text-size-16 margin-bottom-10\">How do you feel about this feature</div><div class=\"display-flex gap-10 align-items-start text-size-14 margin-bottom-25\"><div><div class=\"display-flex flex-wrap gap-10\"><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">1</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">2</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">3</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">4</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">5</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">6</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">7</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">8</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">9</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">10</button></div><div class=\"display-flex justify-content-between margin-top-5 gap-25\"><label class=\"word-wrap text-color-dark\">Extremely dissatisfied</label><label class=\"word-wrap text-color-dark\">Extremely satisfied</label></div></div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"FeedbackRating\"><div class=\"text-medium text-size-16 margin-bottom-10\">Rate your experience with this feature</div><div class=\"display-flex gap-10 align-items-center text-size-14 margin-bottom-25\"><div class=\"display-flex align-items-center text-size-200pct\"><span class=\"text-color-gray rioglyph rioglyph-thumbs-down\"></span></div><div><div class=\"display-flex flex-wrap gap-10\"><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">1</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">2</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">3</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">4</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">5</button></div></div><div class=\"display-flex align-items-center text-size-200pct\"><span class=\"text-color-gray rioglyph rioglyph-thumbs-up\"></span></div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"FeedbackRating\"><div class=\"text-medium text-size-16 margin-bottom-10\">Give us feedback</div><div class=\"display-flex gap-10 align-items-center text-size-14 margin-bottom-25\"><div><div class=\"display-flex flex-wrap gap-10\"><button type=\"button\" class=\"btn btn-default btn-toggle btn-component  btn-icon-only border-none \" tabindex=\"0\"><span class=\"rioglyph rioglyph-face-frown\"></span></button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component  btn-icon-only border-none \" tabindex=\"0\"><span class=\"rioglyph rioglyph-face-neutral\"></span></button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component  btn-icon-only border-none \" tabindex=\"0\"><span class=\"rioglyph rioglyph-face-smile\"></span></button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component  btn-icon-only border-none \" tabindex=\"0\"><span class=\"rioglyph rioglyph-heart\"></span></button></div></div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"FeedbackRating\"><div class=\"text-medium text-size-16 margin-bottom-10\">Rate your experience with our product</div><div class=\"display-flex gap-10 align-items-center text-size-14 margin-bottom-25\"><div><div class=\"display-flex flex-wrap gap-10\"><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">1</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">2</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">3</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">4</button><button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">5</button></div></div><div class=\"display-flex align-items-center text-size-200pct\"><div class=\"display-flex align-items-center gap-5 margin-left-5 text-size-16\"><span class=\"text-color-success rioglyph rioglyph-star\"></span><span class=\"text-color-darker\">Stars</span></div></div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"FeedbackRating\"><div class=\"text-medium text-size-16 margin-bottom-10\">How likely is it that you would recommend us to a friend or colleague?</div><div class=\"display-flex gap-10 align-items-start text-size-14 margin-bottom-25\"><div><div class=\"display-flex flex-wrap gap-10\"><button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">1</button><button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">2</button><button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">3</button><button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">4</button><button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">5</button><button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">6</button><button type=\"button\" class=\"btn btn-warning btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">7</button><button type=\"button\" class=\"btn btn-warning btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">8</button><button type=\"button\" class=\"btn btn-success btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">9</button><button type=\"button\" class=\"btn btn-success btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">10</button></div><div class=\"display-flex justify-content-between margin-top-5 gap-25\"><label class=\"word-wrap text-color-dark\">Not likely at all</label><label class=\"word-wrap text-color-dark\">Very likely</label></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Divider from '@rio-cloud/rio-uikit/Divider';\nimport FeedbackRating from '@rio-cloud/rio-uikit/FeedbackRating';\n\nexport default () => {\n    const handleRatingChanged = (value: number | undefined) => {\n        console.log(value);\n    };\n\n    return (\n        <div>\n            <FeedbackRating\n                count={10}\n                headline='How do you feel about this feature'\n                leftLabel='Extremely dissatisfied'\n                rightLabel='Extremely satisfied'\n                circleButtons\n                onRatingChanged={handleRatingChanged}\n            />\n            <Divider />\n            <FeedbackRating\n                count={5}\n                headline='Rate your experience with this feature'\n                leadingIcon={<span className='text-color-gray rioglyph rioglyph-thumbs-down' />}\n                trailingIcon={<span className='text-color-gray rioglyph rioglyph-thumbs-up' />}\n                onRatingChanged={handleRatingChanged}\n            />\n            <Divider />\n            <FeedbackRating\n                count={4}\n                headline='Give us feedback'\n                buttonClassName='btn-icon-only border-none'\n                buttonLabels={[\n                    <span key='face-frown' className='rioglyph rioglyph-face-frown' />,\n                    <span key='face-neutral' className='rioglyph rioglyph-face-neutral' />,\n                    <span key='face-smile' className='rioglyph rioglyph-face-smile' />,\n                    <span key='face-smile' className='rioglyph rioglyph-heart' />,\n                ]}\n                onRatingChanged={handleRatingChanged}\n            />\n            <Divider />\n            <FeedbackRating\n                count={5}\n                headline='Rate your experience with our product'\n                trailingIcon={\n                    <div className='display-flex align-items-center gap-5 margin-left-5 text-size-16'>\n                        <span className='text-color-success rioglyph rioglyph-star' />\n                        <span className='text-color-darker'>Stars</span>\n                    </div>\n                }\n                onRatingChanged={handleRatingChanged}\n            />\n            <Divider />\n            <FeedbackRating\n                count={10}\n                headline='How likely is it that you would recommend us to a friend or colleague?'\n                leftLabel='Not likely at all'\n                rightLabel='Very likely'\n                circleButtons\n                buttonClassName='btn-outline btn-sm'\n                buttonStyles={[\n                    {\n                        bsStyle: 'danger',\n                    },\n                    {\n                        bsStyle: 'danger',\n                    },\n                    {\n                        bsStyle: 'danger',\n                    },\n                    {\n                        bsStyle: 'danger',\n                    },\n                    {\n                        bsStyle: 'danger',\n                    },\n                    {\n                        bsStyle: 'danger',\n                    },\n                    {\n                        bsStyle: 'warning',\n                    },\n                    {\n                        bsStyle: 'warning',\n                    },\n                    {\n                        bsStyle: 'success',\n                    },\n                    {\n                        bsStyle: 'success',\n                    },\n                ]}\n                onRatingChanged={handleRatingChanged}\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"FeedbackRating\">\n        <div class=\"text-medium text-size-16 margin-bottom-10\">How do you feel about this feature</div>\n        <div class=\"display-flex gap-10 align-items-start text-size-14 margin-bottom-25\">\n            <div>\n                <div class=\"display-flex flex-wrap gap-10\">\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">1</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">2</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">3</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">4</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">5</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">6</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">7</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">8</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">9</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component rounded-circle aspect-ratio-1  \" tabindex=\"0\">10</button>\n                </div>\n                <div class=\"display-flex justify-content-between margin-top-5 gap-25\">\n                    <label class=\"word-wrap text-color-dark\">Extremely dissatisfied</label>\n                    <label class=\"word-wrap text-color-dark\">Extremely satisfied</label>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"FeedbackRating\">\n        <div class=\"text-medium text-size-16 margin-bottom-10\">Rate your experience with this feature</div>\n        <div class=\"display-flex gap-10 align-items-center text-size-14 margin-bottom-25\">\n            <div class=\"display-flex align-items-center text-size-200pct\">\n                <span class=\"text-color-gray rioglyph rioglyph-thumbs-down\">\n                </span>\n            </div>\n            <div>\n                <div class=\"display-flex flex-wrap gap-10\">\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">1</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">2</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">3</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">4</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">5</button>\n                </div>\n            </div>\n            <div class=\"display-flex align-items-center text-size-200pct\">\n                <span class=\"text-color-gray rioglyph rioglyph-thumbs-up\">\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"FeedbackRating\">\n        <div class=\"text-medium text-size-16 margin-bottom-10\">Give us feedback</div>\n        <div class=\"display-flex gap-10 align-items-center text-size-14 margin-bottom-25\">\n            <div>\n                <div class=\"display-flex flex-wrap gap-10\">\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component  btn-icon-only border-none \" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-face-frown\">\n                        </span>\n                    </button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component  btn-icon-only border-none \" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-face-neutral\">\n                        </span>\n                    </button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component  btn-icon-only border-none \" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-face-smile\">\n                        </span>\n                    </button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component  btn-icon-only border-none \" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-heart\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"FeedbackRating\">\n        <div class=\"text-medium text-size-16 margin-bottom-10\">Rate your experience with our product</div>\n        <div class=\"display-flex gap-10 align-items-center text-size-14 margin-bottom-25\">\n            <div>\n                <div class=\"display-flex flex-wrap gap-10\">\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">1</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">2</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">3</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">4</button>\n                    <button type=\"button\" class=\"btn btn-default btn-toggle btn-component   \" tabindex=\"0\">5</button>\n                </div>\n            </div>\n            <div class=\"display-flex align-items-center text-size-200pct\">\n                <div class=\"display-flex align-items-center gap-5 margin-left-5 text-size-16\">\n                    <span class=\"text-color-success rioglyph rioglyph-star\">\n                    </span>\n                    <span class=\"text-color-darker\">Stars</span>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"FeedbackRating\">\n        <div class=\"text-medium text-size-16 margin-bottom-10\">How likely is it that you would recommend us to a friend or colleague?</div>\n        <div class=\"display-flex gap-10 align-items-start text-size-14 margin-bottom-25\">\n            <div>\n                <div class=\"display-flex flex-wrap gap-10\">\n                    <button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">1</button>\n                    <button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">2</button>\n                    <button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">3</button>\n                    <button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">4</button>\n                    <button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">5</button>\n                    <button type=\"button\" class=\"btn btn-danger btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">6</button>\n                    <button type=\"button\" class=\"btn btn-warning btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">7</button>\n                    <button type=\"button\" class=\"btn btn-warning btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">8</button>\n                    <button type=\"button\" class=\"btn btn-success btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">9</button>\n                    <button type=\"button\" class=\"btn btn-success btn-toggle btn-component rounded-circle aspect-ratio-1 btn-outline btn-sm \" tabindex=\"0\">10</button>\n                </div>\n                <div class=\"display-flex justify-content-between margin-top-5 gap-25\">\n                    <label class=\"word-wrap text-color-dark\">Not likely at all</label>\n                    <label class=\"word-wrap text-color-dark\">Very likely</label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "headline",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Optional headline"
+                    },
+                    {
+                      "name": "circleButtons",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the buttons are round."
+                    },
+                    {
+                      "name": "buttonClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class names applied to the individual buttons."
+                    },
+                    {
+                      "name": "buttonLabels",
+                      "type": "ReactNode[]",
+                      "default": "",
+                      "description": "Array of button labels that will be used instead of the index. There needs to be a label for each button defined."
+                    },
+                    {
+                      "name": "buttonStyles",
+                      "type": "{ bsSize?: BUTTON_SIZE; bsStyle?: BUTTON_STYLE; variant?: BUTTON_VARIANT, className?: string }[]",
+                      "default": "",
+                      "description": "Array of button styles to individually define the button size, style and variant. There needs to be a item for each button defined. See Button component."
+                    },
+                    {
+                      "name": "leftLabel",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Left aligned label to name the lowest rating option."
+                    },
+                    {
+                      "name": "rightLabel",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Right aligned label to name the highest rating option."
+                    },
+                    {
+                      "name": "leadingIcon",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional icon placed in front of the rating buttons."
+                    },
+                    {
+                      "name": "trailingIcon",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional icon placed after the rating buttons."
+                    },
+                    {
+                      "name": "onRatingChanged",
+                      "type": "(rating: number | undefined) => void",
+                      "default": "",
+                      "description": "Callback triggered when the rating changes."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "FeedbackInlineButtons",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Was this helpful?",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><h5 class=\"margin-bottom-20\">Subtle request for usefulness</h5><div class=\"height-40 display-flex align-items-center\"><div style=\"opacity: 1; transform: none;\"><div class=\"display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none\"><div class=\"text-color-dark\">Was this helpful?</div><div class=\"btn-toolbar gap-5\"><button type=\"button\" class=\"btn btn-muted btn-sm btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-face-frown text-color-danger\"></span><span>Not really</span></button><button type=\"button\" class=\"btn btn-muted btn-sm btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-face-neutral text-color-warning\"></span><span>Kind of</span></button><button type=\"button\" class=\"btn btn-muted btn-sm btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-face-smile text-color-success\"></span><span>Yes, it was</span></button></div></div></div></div><button type=\"button\" class=\"btn btn-default btn-sm btn-component margin-top-25\" tabindex=\"0\">Reset</button><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><h5 class=\"margin-bottom-20\">Another variation of inline request for usefulness</h5><div class=\"height-40 display-flex align-items-center\"><div style=\"opacity: 1; transform: none;\"><div class=\"display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none\"><div class=\"btn-toolbar gap-5\"><div class=\"height-30 display-flex align-items-center rounded text-color-dark hover-text-color-darker cursor-pointer \"><div class=\"height-25 aspect-ratio-1 bg-lightest rounded-circle display-flex justify-content-center align-items-center\"><span class=\"rioglyph rioglyph-thumbs-up text-size-20 text-color-dark\"></span></div><span class=\"padding-x-5\">Helpful</span></div><div class=\"height-30 display-flex align-items-center rounded text-color-dark hover-text-color-darker cursor-pointer margin-left-10\"><div class=\"height-25 aspect-ratio-1 bg-lightest rounded-circle display-flex justify-content-center align-items-center\"><span class=\"rioglyph rioglyph-thumbs-down text-size-20 text-color-dark\"></span></div><span class=\"padding-x-5\">Not helpful</span></div></div></div></div></div><button type=\"button\" class=\"btn btn-default btn-sm btn-component margin-top-25\" tabindex=\"0\">Reset</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useRef, useState } from 'react';\n\nimport { motion } from '@rio-cloud/rio-uikit/framer-motion';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Fade from '@rio-cloud/rio-uikit/Fade';\nimport FeedbackInlineButtons from '@rio-cloud/rio-uikit/FeedbackInlineButtons';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\nimport useHover from '@rio-cloud/rio-uikit/useHover';\n\nexport default () => {\n    const [hasVoted, setHasVoted] = useState(false);\n    const [hasVoted2, setHasVoted2] = useState(false);\n\n    const handleVote = () => setHasVoted(true);\n    const handleVote2 = () => setHasVoted2(true);\n\n    return (\n        <div>\n            <h5 className='margin-bottom-20'>Subtle request for usefulness</h5>\n            <div className='height-40 display-flex align-items-center'>\n                <Fade>\n                    {hasVoted ? (\n                        <motion.div\n                            initial={{ opacity: 0, x: 20 }}\n                            animate={{ opacity: 1, x: 0 }}\n                            className='display-flex gap-5 align-items-center'\n                        >\n                            <div className='text-color-success text-size-18 line-height-20'>\n                                <span className='rioglyph rioglyph-ok-sign' />\n                            </div>\n                            <div className='text-color-dark'>Thank you for your feedback</div>\n                        </motion.div>\n                    ) : (\n                        <FeedbackInlineButtons\n                            headline='Was this helpful?'\n                            buttons={[\n                                <Button key='no' bsStyle='muted' bsSize='sm' onClick={handleVote}>\n                                    <span className='rioglyph rioglyph-face-frown text-color-danger' />\n                                    <span>Not really</span>\n                                </Button>,\n                                <Button key='kinda' bsStyle='muted' bsSize='sm' onClick={handleVote}>\n                                    <span className='rioglyph rioglyph-face-neutral text-color-warning' />\n                                    <span>Kind of</span>\n                                </Button>,\n                                <Button key='yes' bsStyle='muted' bsSize='sm' onClick={handleVote}>\n                                    <span className='rioglyph rioglyph-face-smile text-color-success' />\n                                    <span>Yes, it was</span>\n                                </Button>,\n                            ]}\n                        />\n                    )}\n                </Fade>\n            </div>\n            <Button bsSize='sm' className='margin-top-25' onClick={() => setHasVoted(false)}>\n                Reset\n            </Button>\n            <Divider />\n            <h5 className='margin-bottom-20'>Another variation of inline request for usefulness</h5>\n            <div className='height-40 display-flex align-items-center'>\n                <Fade>\n                    {hasVoted2 ? (\n                        <motion.div\n                            initial={{ opacity: 0, x: 20 }}\n                            animate={{ opacity: 1, x: 0 }}\n                            className='display-flex gap-5 align-items-center'\n                        >\n                            <div className='text-color-success text-size-18 line-height-20'>\n                                <span className='rioglyph rioglyph-ok-sign' />\n                            </div>\n                            <div className='text-color-dark'>Thank you for your feedback</div>\n                        </motion.div>\n                    ) : (\n                        <FeedbackInlineButtons\n                            buttons={[\n                                <CustomInlineButton\n                                    key='1'\n                                    onClick={handleVote2}\n                                    icon='rioglyph-thumbs-up'\n                                    text='Helpful'\n                                />,\n                                <CustomInlineButton\n                                    key='2'\n                                    onClick={handleVote2}\n                                    icon='rioglyph-thumbs-down'\n                                    text='Not helpful'\n                                    className='margin-left-10'\n                                />,\n                            ]}\n                        />\n                    )}\n                </Fade>\n            </div>\n            <Button bsSize='sm' className='margin-top-25' onClick={() => setHasVoted2(false)}>\n                Reset\n            </Button>\n        </div>\n    );\n};\n\ntype CustomInlineButtonProps = {\n    onClick: VoidFunction;\n    icon: string;\n    text: string;\n    className?: string;\n};\n\nconst CustomInlineButton = (props: CustomInlineButtonProps) => {\n    const { onClick, icon, text, className = '' } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const isHover = useHover(ref);\n    return (\n        <div\n            ref={ref}\n            className={`height-30 display-flex align-items-center rounded text-color-dark hover-text-color-darker cursor-pointer ${className}`}\n            onClick={onClick}\n        >\n            <div className='height-25 aspect-ratio-1 bg-lightest rounded-circle display-flex justify-content-center align-items-center'>\n                <span\n                    className={`rioglyph ${icon} text-size-20 ${isHover ? 'text-color-darker' : 'text-color-dark'}`}\n                />\n            </div>\n            <span className='padding-x-5'>{text}</span>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <h5 class=\"margin-bottom-20\">Subtle request for usefulness</h5>\n    <div class=\"height-40 display-flex align-items-center\">\n        <div style=\"opacity: 1; transform: none;\">\n            <div class=\"display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none\">\n                <div class=\"text-color-dark\">Was this helpful?</div>\n                <div class=\"btn-toolbar gap-5\">\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-face-frown text-color-danger\">\n                        </span>\n                        <span>Not really</span>\n                    </button>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-face-neutral text-color-warning\">\n                        </span>\n                        <span>Kind of</span>\n                    </button>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-face-smile text-color-success\">\n                        </span>\n                        <span>Yes, it was</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <button type=\"button\" class=\"btn btn-default btn-sm btn-component margin-top-25\" tabindex=\"0\">Reset</button>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <h5 class=\"margin-bottom-20\">Another variation of inline request for usefulness</h5>\n    <div class=\"height-40 display-flex align-items-center\">\n        <div style=\"opacity: 1; transform: none;\">\n            <div class=\"display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none\">\n                <div class=\"btn-toolbar gap-5\">\n                    <div class=\"height-30 display-flex align-items-center rounded text-color-dark hover-text-color-darker cursor-pointer \">\n                        <div class=\"height-25 aspect-ratio-1 bg-lightest rounded-circle display-flex justify-content-center align-items-center\">\n                            <span class=\"rioglyph rioglyph-thumbs-up text-size-20 text-color-dark\">\n                            </span>\n                        </div>\n                        <span class=\"padding-x-5\">Helpful</span>\n                    </div>\n                    <div class=\"height-30 display-flex align-items-center rounded text-color-dark hover-text-color-darker cursor-pointer margin-left-10\">\n                        <div class=\"height-25 aspect-ratio-1 bg-lightest rounded-circle display-flex justify-content-center align-items-center\">\n                            <span class=\"rioglyph rioglyph-thumbs-down text-size-20 text-color-dark\">\n                            </span>\n                        </div>\n                        <span class=\"padding-x-5\">Not helpful</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <button type=\"button\" class=\"btn btn-default btn-sm btn-component margin-top-25\" tabindex=\"0\">Reset</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "headline",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Optional headline"
+                    },
+                    {
+                      "name": "buttons",
+                      "type": "ReactNode[]",
+                      "default": "",
+                      "description": "List of buttons to be shown."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "FeedbackReactions",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Simple reaction without labels</label><div class=\"max-width-400 padding-15\"><div class=\"display-flex gap-15 padding-top-5 user-select-none\"><div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\"><div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-thumbs-down text-size-200pct\" style=\"transform: none;\"></span></div><div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\"></div></div><div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\"><div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-thumbs-up text-size-200pct\" style=\"transform: none;\"></span></div><div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\"></div></div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><label>Simple reaction without labels and hover colors</label><div class=\"max-width-400 padding-15\"><div class=\"display-flex gap-15 padding-top-5 user-select-none\"><div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\"><div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-thumbs-down text-size-200pct\" style=\"transform: none;\"></span></div><div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\"></div></div><div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\"><div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-thumbs-up text-size-200pct\" style=\"transform: none;\"></span></div><div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\"></div></div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><label>Small filled reaction with labels right</label><div class=\"max-width-300 padding-15\"><div class=\"display-grid grid-cols-2 gap-15 padding-top-5 user-select-none\"><div class=\"display-flex gap-10 align-items-center text-center cursor-pointer hover-bg-lightest rounded padding-5\"><div class=\"width-40 aspect-ratio-1 border rounded-circle bg-warning text-color-white border-color-lightest display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-thumbs-down text-size-200pct\" style=\"transform: none;\"></span></div><div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\"><span class=\"text-color-darker\">Bad</span></div></div><div class=\"display-flex gap-10 align-items-center text-center cursor-pointer hover-bg-lightest rounded padding-5\"><div class=\"width-40 aspect-ratio-1 border rounded-circle bg-success text-color-white border-color-lightest display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-thumbs-up text-size-200pct\" style=\"transform: none;\"></span></div><div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\"><span class=\"text-color-darker\">Good</span></div></div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><label>Animated reaction with labels</label><div class=\"max-width-300 padding-15\"><div class=\"display-grid grid-cols-2 gap-15 padding-top-5 user-select-none\"><div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\"><div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-thumbs-down text-size-200pct\" style=\"transform: none;\"></span></div><div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">Nicht interessant für mich</div></div><div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\"><div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-thumbs-up text-size-200pct\" style=\"transform: none;\"></span></div><div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">Ich möchte mehr erfahren</div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Divider from '@rio-cloud/rio-uikit/Divider';\nimport FeedbackReactions from '@rio-cloud/rio-uikit/FeedbackReactions';\n\nexport default () => {\n    const [hasVoted, setHasVoted] = useState(false);\n\n    const handleVote = () => {\n        setHasVoted(true);\n    };\n\n    return (\n        <div>\n            <label>Simple reaction without labels</label>\n            <div className='max-width-400 padding-15'>\n                <FeedbackReactions\n                    onVoteUp={() => console.log('Voted up')}\n                    onVoteDown={() => console.log('Voted down')}\n                />\n            </div>\n            <Divider />\n            <label>Simple reaction without labels and hover colors</label>\n            <div className='max-width-400 padding-15'>\n                <FeedbackReactions\n                    onVoteUp={() => console.log('Voted up')}\n                    onVoteDown={() => console.log('Voted down')}\n                    colorHoverUp='success'\n                    colorHoverDown='warning'\n                />\n            </div>\n            <Divider />\n            <label>Small filled reaction with labels right</label>\n            <div className='max-width-300 padding-15'>\n                <FeedbackReactions\n                    onVoteUp={() => console.log('Voted up')}\n                    onVoteDown={() => console.log('Voted down')}\n                    labelPosition='right'\n                    colorFillUp='success'\n                    colorFillDown='warning'\n                    colorHoverUp='white'\n                    colorHoverDown='white'\n                    labelUp={<span className='text-color-darker'>Good</span>}\n                    labelDown={<span className='text-color-darker'>Bad</span>}\n                    itemClassName='hover-bg-lightest rounded padding-5'\n                    size='sm'\n                />\n            </div>\n            <Divider />\n            <label>Animated reaction with labels</label>\n            <div className='max-width-300 padding-15'>\n                <FeedbackReactions\n                    onVoteUp={() => console.log('Voted up')}\n                    onVoteDown={() => console.log('Voted down')}\n                    labelUp='Ich möchte mehr erfahren'\n                    labelDown='Nicht interessant für mich'\n                    animated\n                />\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Simple reaction without labels</label>\n    <div class=\"max-width-400 padding-15\">\n        <div class=\"display-flex gap-15 padding-top-5 user-select-none\">\n            <div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\">\n                <div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-thumbs-down text-size-200pct\" style=\"transform: none;\">\n                    </span>\n                </div>\n                <div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">\n                </div>\n            </div>\n            <div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\">\n                <div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-thumbs-up text-size-200pct\" style=\"transform: none;\">\n                    </span>\n                </div>\n                <div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <label>Simple reaction without labels and hover colors</label>\n    <div class=\"max-width-400 padding-15\">\n        <div class=\"display-flex gap-15 padding-top-5 user-select-none\">\n            <div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\">\n                <div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-thumbs-down text-size-200pct\" style=\"transform: none;\">\n                    </span>\n                </div>\n                <div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">\n                </div>\n            </div>\n            <div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\">\n                <div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-thumbs-up text-size-200pct\" style=\"transform: none;\">\n                    </span>\n                </div>\n                <div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <label>Small filled reaction with labels right</label>\n    <div class=\"max-width-300 padding-15\">\n        <div class=\"display-grid grid-cols-2 gap-15 padding-top-5 user-select-none\">\n            <div class=\"display-flex gap-10 align-items-center text-center cursor-pointer hover-bg-lightest rounded padding-5\">\n                <div class=\"width-40 aspect-ratio-1 border rounded-circle bg-warning text-color-white border-color-lightest display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-thumbs-down text-size-200pct\" style=\"transform: none;\">\n                    </span>\n                </div>\n                <div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">\n                    <span class=\"text-color-darker\">Bad</span>\n                </div>\n            </div>\n            <div class=\"display-flex gap-10 align-items-center text-center cursor-pointer hover-bg-lightest rounded padding-5\">\n                <div class=\"width-40 aspect-ratio-1 border rounded-circle bg-success text-color-white border-color-lightest display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-thumbs-up text-size-200pct\" style=\"transform: none;\">\n                    </span>\n                </div>\n                <div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">\n                    <span class=\"text-color-darker\">Good</span>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <label>Animated reaction with labels</label>\n    <div class=\"max-width-300 padding-15\">\n        <div class=\"display-grid grid-cols-2 gap-15 padding-top-5 user-select-none\">\n            <div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\">\n                <div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-thumbs-down text-size-200pct\" style=\"transform: none;\">\n                    </span>\n                </div>\n                <div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">Nicht interessant für mich</div>\n            </div>\n            <div class=\"display-flex gap-10 flex-column align-items-center text-center cursor-pointer\">\n                <div class=\"width-50 aspect-ratio-1 border rounded-circle bg-lightest border-color-lightest display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-thumbs-up text-size-200pct\" style=\"transform: none;\">\n                    </span>\n                </div>\n                <div class=\"text-wrap-balance line-height-125rel text-medium text-color-darker\">Ich möchte mehr erfahren</div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "headline",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Optional headline"
+                    },
+                    {
+                      "name": "size",
+                      "type": "\"sm\" | \"md\"",
+                      "default": "",
+                      "description": "Size of the reaction buttons."
+                    },
+                    {
+                      "name": "labelPosition",
+                      "type": "\"bottom\" | \"right\"",
+                      "default": "bottom",
+                      "description": "Position of the reaction button labels."
+                    },
+                    {
+                      "name": "labelUp",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Label for the up button."
+                    },
+                    {
+                      "name": "labelDown",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Label for the down button."
+                    },
+                    {
+                      "name": "colorFillUp",
+                      "type": "string",
+                      "default": "bg-lightest",
+                      "description": "Custom fill color for the up button."
+                    },
+                    {
+                      "name": "colorFillDown",
+                      "type": "string",
+                      "default": "bg-lightest",
+                      "description": "Custom fill color for the down button."
+                    },
+                    {
+                      "name": "colorHoverUp",
+                      "type": "string",
+                      "default": "primary",
+                      "description": "Custom hover color for the up button."
+                    },
+                    {
+                      "name": "colorHoverDown",
+                      "type": "string",
+                      "default": "primary",
+                      "description": "Custom hover color for the down button."
+                    },
+                    {
+                      "name": "onVoteUp",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "Callback function triggered on up vote."
+                    },
+                    {
+                      "name": "onVoteDown",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "Callback function triggered on down vote."
+                    },
+                    {
+                      "name": "itemClassName",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes applied to the individual reaction item (button and label)."
+                    },
+                    {
+                      "name": "animated",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines whether the reaction icon is animated."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}