@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/feedback.md

@@ -0,0 +1,758 @@
+# FeedbackRating
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/feedback
+*Captured:* 2025-12-12T14:20:56.783Z
+
+## FeedbackRating
+
+### Example: Extremely dissatisfied
+
+How do you feel about this feature
+12345678910
+Extremely dissatisfiedExtremely satisfied
+
+Rate your experience with this feature
+
+12345
+
+Give us feedback
+
+Rate your experience with our product
+12345
+
+Stars
+
+How likely is it that you would recommend us to a friend or colleague?
+12345678910
+Not likely at allVery likely
+
+#### Summary
+
+How do you feel about this feature
+12345678910
+Extremely dissatisfiedExtremely satisfied
+
+Rate your experience with this feature
+
+12345
+
+Give us feedback
+
+Rate your experience with our product
+12345
+
+Stars
+
+How likely is it that you would recommend us to a friend or colleague?
+12345678910
+Not likely at allVery likely
+
+#### React (tsx)
+
+```tsx
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import FeedbackRating from '@rio-cloud/rio-uikit/FeedbackRating';
+
+export default () => {
+    const handleRatingChanged = (value: number | undefined) => {
+        console.log(value);
+    };
+
+    return (
+        <div>
+            <FeedbackRating
+                count={10}
+                headline='How do you feel about this feature'
+                leftLabel='Extremely dissatisfied'
+                rightLabel='Extremely satisfied'
+                circleButtons
+                onRatingChanged={handleRatingChanged}
+            />
+            <Divider />
+            <FeedbackRating
+                count={5}
+                headline='Rate your experience with this feature'
+                leadingIcon={<span className='text-color-gray rioglyph rioglyph-thumbs-down' />}
+                trailingIcon={<span className='text-color-gray rioglyph rioglyph-thumbs-up' />}
+                onRatingChanged={handleRatingChanged}
+            />
+            <Divider />
+            <FeedbackRating
+                count={4}
+                headline='Give us feedback'
+                buttonClassName='btn-icon-only border-none'
+                buttonLabels={[
+                    <span key='face-frown' className='rioglyph rioglyph-face-frown' />,
+                    <span key='face-neutral' className='rioglyph rioglyph-face-neutral' />,
+                    <span key='face-smile' className='rioglyph rioglyph-face-smile' />,
+                    <span key='face-smile' className='rioglyph rioglyph-heart' />,
+                ]}
+                onRatingChanged={handleRatingChanged}
+            />
+            <Divider />
+            <FeedbackRating
+                count={5}
+                headline='Rate your experience with our product'
+                trailingIcon={
+                    <div className='display-flex align-items-center gap-5 margin-left-5 text-size-16'>
+                        <span className='text-color-success rioglyph rioglyph-star' />
+                        <span className='text-color-darker'>Stars</span>
+                    </div>
+                }
+                onRatingChanged={handleRatingChanged}
+            />
+            <Divider />
+            <FeedbackRating
+                count={10}
+                headline='How likely is it that you would recommend us to a friend or colleague?'
+                leftLabel='Not likely at all'
+                rightLabel='Very likely'
+                circleButtons
+                buttonClassName='btn-outline btn-sm'
+                buttonStyles={[
+                    {
+                        bsStyle: 'danger',
+                    },
+                    {
+                        bsStyle: 'danger',
+                    },
+                    {
+                        bsStyle: 'danger',
+                    },
+                    {
+                        bsStyle: 'danger',
+                    },
+                    {
+                        bsStyle: 'danger',
+                    },
+                    {
+                        bsStyle: 'danger',
+                    },
+                    {
+                        bsStyle: 'warning',
+                    },
+                    {
+                        bsStyle: 'warning',
+                    },
+                    {
+                        bsStyle: 'success',
+                    },
+                    {
+                        bsStyle: 'success',
+                    },
+                ]}
+                onRatingChanged={handleRatingChanged}
+            />
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| headline | ReactNode | — | Optional headline |
+| circleButtons | Boolean | false | Defines whether the buttons are round. |
+| buttonClassName | String | — | Optional class names applied to the individual buttons. |
+| buttonLabels | ReactNode[] | — | Array of button labels that will be used instead of the index. There needs to be a label for each button defined. |
+| buttonStyles | { bsSize?: BUTTON_SIZE; bsStyle?: BUTTON_STYLE; variant?: BUTTON_VARIANT, className?: string }[] | — | 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. |
+| leftLabel | ReactNode | — | Left aligned label to name the lowest rating option. |
+| rightLabel | ReactNode | — | Right aligned label to name the highest rating option. |
+| leadingIcon | ReactNode | — | Additional icon placed in front of the rating buttons. |
+| trailingIcon | ReactNode | — | Additional icon placed after the rating buttons. |
+| onRatingChanged | (rating: number \| undefined) => void | — | Callback triggered when the rating changes. |
+
+## FeedbackInlineButtons
+
+### Example: Was this helpful?
+
+Subtle request for usefulness
+Was this helpful?
+Not reallyKind ofYes, it was
+
+Reset
+
+Another variation of inline request for usefulness
+
+Helpful
+
+Not helpful
+
+Reset
+
+#### Summary
+
+Subtle request for usefulness
+Was this helpful?
+Not reallyKind ofYes, it was
+
+Reset
+
+Another variation of inline request for usefulness
+
+Helpful
+
+Not helpful
+
+Reset
+
+#### React (tsx)
+
+```tsx
+import { useRef, useState } from 'react';
+
+import { motion } from '@rio-cloud/rio-uikit/motion';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Fade from '@rio-cloud/rio-uikit/Fade';
+import FeedbackInlineButtons from '@rio-cloud/rio-uikit/FeedbackInlineButtons';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import useHover from '@rio-cloud/rio-uikit/useHover';
+
+export default () => {
+    const [hasVoted, setHasVoted] = useState(false);
+    const [hasVoted2, setHasVoted2] = useState(false);
+
+    const handleVote = () => setHasVoted(true);
+    const handleVote2 = () => setHasVoted2(true);
+
+    return (
+        <div>
+            <h5 className='margin-bottom-20'>Subtle request for usefulness</h5>
+            <div className='height-40 display-flex align-items-center'>
+                <Fade>
+                    {hasVoted ? (
+                        <motion.div
+                            initial={{ opacity: 0, x: 20 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            className='display-flex gap-5 align-items-center'
+                        >
+                            <div className='text-color-success text-size-18 line-height-20'>
+                                <span className='rioglyph rioglyph-ok-sign' />
+                            </div>
+                            <div className='text-color-dark'>Thank you for your feedback</div>
+                        </motion.div>
+                    ) : (
+                        <FeedbackInlineButtons
+                            headline='Was this helpful?'
+                            buttons={[
+                                <Button key='no' bsStyle='muted' bsSize='sm' onClick={handleVote}>
+                                    <span className='rioglyph rioglyph-face-frown text-color-danger' />
+                                    <span>Not really</span>
+                                </Button>,
+                                <Button key='kinda' bsStyle='muted' bsSize='sm' onClick={handleVote}>
+                                    <span className='rioglyph rioglyph-face-neutral text-color-warning' />
+                                    <span>Kind of</span>
+                                </Button>,
+                                <Button key='yes' bsStyle='muted' bsSize='sm' onClick={handleVote}>
+                                    <span className='rioglyph rioglyph-face-smile text-color-success' />
+                                    <span>Yes, it was</span>
+                                </Button>,
+                            ]}
+                        />
+                    )}
+                </Fade>
+            </div>
+            <Button bsSize='sm' className='margin-top-25' onClick={() => setHasVoted(false)}>
+                Reset
+            </Button>
+            <Divider />
+            <h5 className='margin-bottom-20'>Another variation of inline request for usefulness</h5>
+            <div className='height-40 display-flex align-items-center'>
+                <Fade>
+                    {hasVoted2 ? (
+                        <motion.div
+                            initial={{ opacity: 0, x: 20 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            className='display-flex gap-5 align-items-center'
+                        >
+                            <div className='text-color-success text-size-18 line-height-20'>
+                                <span className='rioglyph rioglyph-ok-sign' />
+                            </div>
+                            <div className='text-color-dark'>Thank you for your feedback</div>
+                        </motion.div>
+                    ) : (
+                        <FeedbackInlineButtons
+                            buttons={[
+                                <CustomInlineButton
+                                    key='1'
+                                    onClick={handleVote2}
+                                    icon='rioglyph-thumbs-up'
+                                    text='Helpful'
+                                />,
+                                <CustomInlineButton
+                                    key='2'
+                                    onClick={handleVote2}
+                                    icon='rioglyph-thumbs-down'
+                                    text='Not helpful'
+                                    className='margin-left-10'
+                                />,
+                            ]}
+                        />
+                    )}
+                </Fade>
+            </div>
+            <Button bsSize='sm' className='margin-top-25' onClick={() => setHasVoted2(false)}>
+                Reset
+            </Button>
+        </div>
+    );
+};
+
+type CustomInlineButtonProps = {
+    onClick: VoidFunction;
+    icon: string;
+    text: string;
+    className?: string;
+};
+
+const CustomInlineButton = (props: CustomInlineButtonProps) => {
+    const { onClick, icon, text, className = '' } = props;
+
+    const ref = useRef<HTMLDivElement>(null);
+    const isHover = useHover(ref);
+    return (
+        <div
+            ref={ref}
+            className={`height-30 display-flex align-items-center rounded text-color-dark hover-text-color-darker cursor-pointer ${className}`}
+            onClick={onClick}
+        >
+            <div className='height-25 aspect-ratio-1 bg-lightest rounded-circle display-flex justify-content-center align-items-center'>
+                <span
+                    className={`rioglyph ${icon} text-size-20 ${isHover ? 'text-color-darker' : 'text-color-dark'}`}
+                />
+            </div>
+            <span className='padding-x-5'>{text}</span>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| headline | ReactNode | — | Optional headline |
+| buttons | ReactNode[] | — | List of buttons to be shown. |
+
+## FeedbackReactions
+
+### Example: Example 3
+
+Simple reaction without labels
+
+Simple reaction without labels and hover colors
+
+Small filled reaction with labels right
+Bad
+
+Good
+
+Animated reaction with labels
+Nicht interessant für mich
+
+Ich möchte mehr erfahren
+
+#### Summary
+
+Simple reaction without labels
+
+Simple reaction without labels and hover colors
+
+Small filled reaction with labels right
+Bad
+
+Good
+
+Animated reaction with labels
+Nicht interessant für mich
+
+Ich möchte mehr erfahren
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import FeedbackReactions from '@rio-cloud/rio-uikit/FeedbackReactions';
+
+export default () => {
+    const [hasVoted, setHasVoted] = useState(false);
+
+    const handleVote = () => {
+        setHasVoted(true);
+    };
+
+    return (
+        <div>
+            <label>Simple reaction without labels</label>
+            <div className='max-width-400 padding-15'>
+                <FeedbackReactions
+                    onVoteUp={() => console.log('Voted up')}
+                    onVoteDown={() => console.log('Voted down')}
+                />
+            </div>
+            <Divider />
+            <label>Simple reaction without labels and hover colors</label>
+            <div className='max-width-400 padding-15'>
+                <FeedbackReactions
+                    onVoteUp={() => console.log('Voted up')}
+                    onVoteDown={() => console.log('Voted down')}
+                    colorHoverUp='success'
+                    colorHoverDown='warning'
+                />
+            </div>
+            <Divider />
+            <label>Small filled reaction with labels right</label>
+            <div className='max-width-300 padding-15'>
+                <FeedbackReactions
+                    onVoteUp={() => console.log('Voted up')}
+                    onVoteDown={() => console.log('Voted down')}
+                    labelPosition='right'
+                    colorFillUp='success'
+                    colorFillDown='warning'
+                    colorHoverUp='white'
+                    colorHoverDown='white'
+                    labelUp={<span className='text-color-darker'>Good</span>}
+                    labelDown={<span className='text-color-darker'>Bad</span>}
+                    itemClassName='hover-bg-lightest rounded padding-5'
+                    size='sm'
+                />
+            </div>
+            <Divider />
+            <label>Animated reaction with labels</label>
+            <div className='max-width-300 padding-15'>
+                <FeedbackReactions
+                    onVoteUp={() => console.log('Voted up')}
+                    onVoteDown={() => console.log('Voted down')}
+                    labelUp='Ich möchte mehr erfahren'
+                    labelDown='Nicht interessant für mich'
+                    animated
+                />
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| headline | ReactNode | — | Optional headline |
+| size | "sm" \| "md" | — | Size of the reaction buttons. |
+| labelPosition | "bottom" \| "right" | bottom | Position of the reaction button labels. |
+| labelUp | ReactNode | — | Label for the up button. |
+| labelDown | ReactNode | — | Label for the down button. |
+| colorFillUp | string | bg-lightest | Custom fill color for the up button. |
+| colorFillDown | string | bg-lightest | Custom fill color for the down button. |
+| colorHoverUp | string | primary | Custom hover color for the up button. |
+| colorHoverDown | string | primary | Custom hover color for the down button. |
+| onVoteUp | VoidFunction | — | Callback function triggered on up vote. |
+| onVoteDown | VoidFunction | — | Callback function triggered on down vote. |
+| itemClassName | string | — | Additional classes applied to the individual reaction item (button and label). |
+| animated | boolean | false | Defines whether the reaction icon is animated. |