# FeedbackRating

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/feedback
*Captured:* 2026-04-27T14:58:19.928Z

## FeedbackRating

### Example: Extremely dissatisfied

How do you feel about this feature
1 2 3 4 5 6 7 8 9 10
Extremely dissatisfied Extremely satisfied

Rate your experience with this feature

1 2 3 4 5

Give us feedback

Rate your experience with our product
1 2 3 4 5

Stars

How likely is it that you would recommend us to a friend or colleague?
1 2 3 4 5 6 7 8 9 10
Not likely at all Very 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 | React.ReactNode | — | Optional headline |
| count | number | 1 | The amount of toggle buttons used to rate. |
| circleButtons | boolean | false | Defines whether the buttons are round. |
| buttonClassName | string | — | Optional class names applied to all the buttons. If you need more control on styling individual buttons, see buttonStyles. |
| buttonLabels | React.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. |
| leftLabel | React.ReactNode | — | Left aligned label to name the lowest rating option. |
| rightLabel | React.ReactNode | — | Right aligned label to name the highest rating option. |
| leadingIcon | React.ReactNode | — | Additional icon placed in front of the rating buttons. |
| trailingIcon | React.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 really Kind of Yes, 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 | React.ReactNode | — | Optional headline inlined with the buttons. |
| buttons | React.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

#### 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 | React.ReactNode | — | Optional headline inlined with the buttons. |
| size | 'sm' \| 'md' | 'md' | Size of the reaction buttons. |
| labelPosition | 'right' \| 'bottom' | 'bottom' | Position of the reaction button labels. |
| labelUp | React.ReactNode | — | Label for the up button. |
| labelDown | React.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. |