# StatusBar

*Category:* Components
*Section:* Progress
*Source:* https://uikit.developers.rio.cloud/#/components/statusBar
*Captured:* 2026-04-27T14:57:46.829Z

Flexible component to showcase various states based on progress bars.

## StatusBar

Usage: Use these components only on light backgrounds and limit the width of the wrapping element to avoid extreme long progress bars.

Usage:

### Example: Example 1

V1
Top label with icon left

42 min resting

V2
Top label with icon right

42 min resting

V3
Split whith icon left and label right

1:45 h

V4
Split whith icon right and label left

1:45 h

V5
Both icon and label left

13 min

V6
Both icon and label right

13 min

V7
Label left

42 min

V8
Thin label right

42 min

V9
Large progress with large icon left

V10
Large progress with large icon right

V11
Large progress with large icon and label

44%

V12
Large progress only

#### React (tsx)

```tsx
import StatusBar from '@rio-cloud/rio-uikit/StatusBar';

const Headline = ({ headline, description }: { headline: string; description: string }) => (
    <div className='display-flex-md align-items-baseline margin-bottom-10'>
        <div className='text-size-16'>{headline}</div>
        <div className='text-size-14 margin-left-10-md'>{description}</div>
    </div>
);

export default () => (
    <div>
        <div className='row'>
            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>
                <Headline headline='V1' description='Top label with icon left' />

                <StatusBar
                    icon={{ name: 'rioglyph-status-resting', color: 'text-color-status-resting' }}
                    label={{ value: '42 min resting', alignment: 'top', color: 'text-color-status-resting' }}
                    progress={[
                        { percentage: 30, color: 'progress-bar-status-resting', tooltip: <span>30%</span> },
                        { percentage: 70, color: 'progress-bar-light', tooltip: <span>70%</span> },
                    ]}
                    className='MyProgress'
                />
            </div>

            <div className='col-sm-6'>
                <Headline headline='V2' description='Top label with icon right' />

                <StatusBar
                    icon={{ name: 'rioglyph-status-resting', alignment: 'right', color: 'text-color-status-resting' }}
                    label={{ value: '42 min resting', alignment: 'top', color: 'text-color-status-resting' }}
                    progress={[
                        { percentage: 30, color: 'progress-bar-status-resting', tooltip: <span>30%</span> },
                        { percentage: 70, color: 'progress-bar-light', tooltip: <span>70%</span> },
                    ]}
                />
            </div>
        </div>

        <hr className='margin-top-25 margin-bottom-25' />

        <div className='row'>
            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm'>
                <Headline headline='V3' description='Split whith icon left and label right' />

                <StatusBar
                    icon={{ name: 'rioglyph-status-driving', color: 'text-color-status-driving' }}
                    label={{ value: '1:45 h', color: 'text-color-status-driving' }}
                    progress={[
                        { percentage: 85, color: 'progress-bar-status-driving', tooltip: <span>85%</span> },
                        { percentage: 15, color: 'progress-bar-light', tooltip: <span>15%</span> },
                    ]}
                />
            </div>

            <div className='col-sm-6'>
                <Headline headline='V4' description='Split whith icon right and label left' />

                <StatusBar
                    icon={{ name: 'rioglyph-status-driving', alignment: 'right', color: 'text-color-status-driving' }}
                    label={{ value: '1:45 h', alignment: 'left', color: 'text-color-status-driving' }}
                    progress={[
                        { percentage: 85, color: 'progress-bar-status-driving', tooltip: <span>85%</span> },
                        { percentage: 15, color: 'progress-bar-light', tooltip: <span>15%</span> },
                    ]}
                />
            </div>
        </div>

        <hr className='margin-top-25 margin-bottom-25' />

        <div className='row'>
            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>
                <Headline headline='V5' description='Both icon and label left' />

                <StatusBar
                    icon={{ name: 'rioglyph-status-working', color: 'text-color-status-working' }}
                    label={{ value: '13 min', alignment: 'left', color: 'text-color-status-working' }}
                    progress={[
                        { percentage: 15, color: 'progress-bar-status-working', tooltip: <span>15%</span> },
                        { percentage: 85, color: 'progress-bar-light', tooltip: <span>85%</span> },
                    ]}
                />
            </div>

            <div className='col-sm-6'>
                <Headline headline='V6' description='Both icon and label right' />

                <StatusBar
                    icon={{ name: 'rioglyph-status-working', alignment: 'right', color: 'text-color-status-working' }}
                    label={{ value: '13 min', alignment: 'right', color: 'text-color-status-working' }}
                    progress={[
                        { percentage: 15, color: 'progress-bar-status-working', tooltip: <span>15%</span> },
                        { percentage: 85, color: 'progress-bar-light', tooltip: <span>85%</span> },
                    ]}
                />
            </div>
        </div>

        <hr className='margin-top-25 margin-bottom-25' />

        <div className='row'>
            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>
                <Headline headline='V7' description='Label left' />

                <StatusBar
                    label={{ value: '42 min', alignment: 'left', color: 'text-color-status-available' }}
                    progress={[
                        { percentage: 55, color: 'progress-bar-status-available', tooltip: <span>55%</span> },
                        { percentage: 45, color: 'progress-bar-light', tooltip: <span>45%</span> },
                    ]}
                />
            </div>

            <div className='col-sm-6'>
                <Headline headline='V8' description='Thin label right' />

                <StatusBar
                    label={{ value: '42 min', weight: 'light', color: 'text-color-status-available' }}
                    progress={[
                        { percentage: 55, color: 'progress-bar-status-available', tooltip: <span>55%</span> },
                        { percentage: 45, color: 'progress-bar-light', tooltip: <span>45%</span> },
                    ]}
                />
            </div>
        </div>

        <hr className='margin-top-25 margin-bottom-25' />

        <div className='row'>
            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>
                <Headline headline='V9' description='Large progress with large icon left' />

                <StatusBar
                    icon={{ name: 'rioglyph-user-sign', color: 'text-color-darker' }}
                    progress={[
                        { percentage: 15, color: 'progress-bar-rating-1' },
                        { percentage: 25, color: 'progress-bar-rating-2' },
                        { percentage: 20, color: 'progress-bar-rating-3' },
                        { percentage: 30, color: 'progress-bar-rating-4' },
                        { percentage: 10, color: 'progress-bar-rating-5' },
                    ]}
                    size='large'
                />
            </div>

            <div className='col-sm-6'>
                <Headline headline='V10' description='Large progress with large icon right' />

                <StatusBar
                    icon={{ name: 'rioglyph-user-sign', color: 'text-color-darker', alignment: 'right' }}
                    progress={[
                        { percentage: 15, color: 'progress-bar-rating-1' },
                        { percentage: 25, color: 'progress-bar-rating-2' },
                        { percentage: 20, color: 'progress-bar-rating-3' },
                        { percentage: 30, color: 'progress-bar-rating-4' },
                        { percentage: 10, color: 'progress-bar-rating-5' },
                    ]}
                    size='large'
                />
            </div>
        </div>

        <hr className='margin-top-25 margin-bottom-25' />

        <Headline headline='V11' description='Large progress with large icon and label' />

        <StatusBar
            icon={{ name: 'rioglyph-status-working', color: 'text-color-status-working' }}
            label={{ value: '44%', color: 'text-color-status-working' }}
            progress={[{ percentage: 44, color: 'progress-bar-status-working', tooltip: <span>44%</span> }]}
            size='large'
            useProgressDivider={false}
        />

        <hr className='margin-top-25 margin-bottom-25' />

        <Headline headline='V12' description='Large progress only' />

        <StatusBar progress={[{ percentage: 25, color: 'progress-bar-info' }]} size='large' />
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="row">
        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V1</div>
                <div class="text-size-14 margin-left-10-md">Top label with icon left</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-end MyProgress">
                <div class="flex-order-1 margin-right-5">
                    <span class="rioglyph rioglyph-status-resting text-color-status-resting text-size-h3">
                    </span>
                </div>
                <div class="display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10">
                    <div class="display-flex justify-content-center">
                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold">42 min resting</span>
                    </div>
                    <div class="display-flex flex-1-0">
                        <div class="progress margin-0 flex-1-0 height-5">
                            <div class="progress-bar progress-bar-status-resting progress-divider" style="width: 30%;">
                            </div>
                            <div class="progress-bar progress-bar-light progress-divider" style="width: 70%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V2</div>
                <div class="text-size-14 margin-left-10-md">Top label with icon right</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-end">
                <div class="flex-order-2 margin-left-5">
                    <span class="rioglyph rioglyph-status-resting text-color-status-resting text-size-h3">
                    </span>
                </div>
                <div class="display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10">
                    <div class="display-flex justify-content-center">
                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold">42 min resting</span>
                    </div>
                    <div class="display-flex flex-1-0">
                        <div class="progress margin-0 flex-1-0 height-5">
                            <div class="progress-bar progress-bar-status-resting progress-divider" style="width: 30%;">
                            </div>
                            <div class="progress-bar progress-bar-light progress-divider" style="width: 70%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="margin-top-25 margin-bottom-25">
    <div class="row">
        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V3</div>
                <div class="text-size-14 margin-left-10-md">Split whith icon left and label right</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-center">
                <div class="flex-order-1 margin-right-5">
                    <span class="rioglyph rioglyph-status-driving text-color-status-driving text-size-h3">
                    </span>
                </div>
                <div class="display-flex flex-1-0 flex-order-2 align-items-center">
                    <div class="flex-order-2 margin-left-10">
                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-driving text-size-16 text-bold">1:45 h</span>
                    </div>
                    <div class="display-flex flex-1-0 flex-order-1">
                        <div class="progress margin-0 flex-1-0 height-5">
                            <div class="progress-bar progress-bar-status-driving progress-divider" style="width: 85%;">
                            </div>
                            <div class="progress-bar progress-bar-light progress-divider" style="width: 15%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V4</div>
                <div class="text-size-14 margin-left-10-md">Split whith icon right and label left</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-center">
                <div class="flex-order-2 margin-left-5">
                    <span class="rioglyph rioglyph-status-driving text-color-status-driving text-size-h3">
                    </span>
                </div>
                <div class="display-flex flex-1-0 flex-order-1 align-items-center">
                    <div class="flex-order-1 margin-right-10">
                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-driving text-size-16 text-bold">1:45 h</span>
                    </div>
                    <div class="display-flex flex-1-0 flex-order-2">
                        <div class="progress margin-0 flex-1-0 height-5">
                            <div class="progress-bar progress-bar-status-driving progress-divider" style="width: 85%;">
                            </div>
                            <div class="progress-bar progress-bar-light progress-divider" style="width: 15%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="margin-top-25 margin-bottom-25">
    <div class="row">
        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V5</div>
                <div class="text-size-14 margin-left-10-md">Both icon and label left</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-center">
                <div class="flex-order-1 margin-right-5">
                    <span class="rioglyph rioglyph-status-working text-color-status-working text-size-h3">
                    </span>
                </div>
                <div class="display-flex flex-1-0 flex-order-2 align-items-center">
                    <div class="flex-order-1 margin-right-10">
                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-16 text-bold">13 min</span>
                    </div>
                    <div class="display-flex flex-1-0 flex-order-2">
                        <div class="progress margin-0 flex-1-0 height-5">
                            <div class="progress-bar progress-bar-status-working progress-divider" style="width: 15%;">
                            </div>
                            <div class="progress-bar progress-bar-light progress-divider" style="width: 85%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V6</div>
                <div class="text-size-14 margin-left-10-md">Both icon and label right</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-center">
                <div class="flex-order-2 margin-left-5">
                    <span class="rioglyph rioglyph-status-working text-color-status-working text-size-h3">
                    </span>
                </div>
                <div class="display-flex flex-1-0 flex-order-1 align-items-center">
                    <div class="flex-order-2 margin-left-10">
                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-16 text-bold">13 min</span>
                    </div>
                    <div class="display-flex flex-1-0 flex-order-1">
                        <div class="progress margin-0 flex-1-0 height-5">
                            <div class="progress-bar progress-bar-status-working progress-divider" style="width: 15%;">
                            </div>
                            <div class="progress-bar progress-bar-light progress-divider" style="width: 85%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="margin-top-25 margin-bottom-25">
    <div class="row">
        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V7</div>
                <div class="text-size-14 margin-left-10-md">Label left</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-center">
                <div class="display-flex flex-1-0 align-items-center">
                    <div class="flex-order-1 margin-right-10">
                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-available text-size-16 text-bold">42 min</span>
                    </div>
                    <div class="display-flex flex-1-0 flex-order-2">
                        <div class="progress margin-0 flex-1-0 height-5">
                            <div class="progress-bar progress-bar-status-available progress-divider" style="width: 55%;">
                            </div>
                            <div class="progress-bar progress-bar-light progress-divider" style="width: 45%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V8</div>
                <div class="text-size-14 margin-left-10-md">Thin label right</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-center">
                <div class="display-flex flex-1-0 align-items-center">
                    <div class="flex-order-2 margin-left-10">
                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-available text-size-16">42 min</span>
                    </div>
                    <div class="display-flex flex-1-0 flex-order-1">
                        <div class="progress margin-0 flex-1-0 height-5">
                            <div class="progress-bar progress-bar-status-available progress-divider" style="width: 55%;">
                            </div>
                            <div class="progress-bar progress-bar-light progress-divider" style="width: 45%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="margin-top-25 margin-bottom-25">
    <div class="row">
        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V9</div>
                <div class="text-size-14 margin-left-10-md">Large progress with large icon left</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-center">
                <div class="flex-order-1 margin-right-5">
                    <span class="rioglyph rioglyph-user-sign text-color-darker text-size-h2">
                    </span>
                </div>
                <div class="display-flex flex-1-0 flex-order-2 align-items-center">
                    <div class="display-flex flex-1-0">
                        <div class="progress margin-0 flex-1-0 height-10">
                            <div class="progress-bar progress-bar-rating-1 progress-divider" style="width: 15%;">
                            </div>
                            <div class="progress-bar progress-bar-rating-2 progress-divider" style="width: 25%;">
                            </div>
                            <div class="progress-bar progress-bar-rating-3 progress-divider" style="width: 20%;">
                            </div>
                            <div class="progress-bar progress-bar-rating-4 progress-divider" style="width: 30%;">
                            </div>
                            <div class="progress-bar progress-bar-rating-5 progress-divider" style="width: 10%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="display-flex-md align-items-baseline margin-bottom-10">
                <div class="text-size-16">V10</div>
                <div class="text-size-14 margin-left-10-md">Large progress with large icon right</div>
            </div>
            <div class="StatusBar width-100pct display-flex align-items-center">
                <div class="flex-order-2 margin-left-5">
                    <span class="rioglyph rioglyph-user-sign text-color-darker text-size-h2">
                    </span>
                </div>
                <div class="display-flex flex-1-0 flex-order-1 align-items-center">
                    <div class="display-flex flex-1-0">
                        <div class="progress margin-0 flex-1-0 height-10">
                            <div class="progress-bar progress-bar-rating-1 progress-divider" style="width: 15%;">
                            </div>
                            <div class="progress-bar progress-bar-rating-2 progress-divider" style="width: 25%;">
                            </div>
                            <div class="progress-bar progress-bar-rating-3 progress-divider" style="width: 20%;">
                            </div>
                            <div class="progress-bar progress-bar-rating-4 progress-divider" style="width: 30%;">
                            </div>
                            <div class="progress-bar progress-bar-rating-5 progress-divider" style="width: 10%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="margin-top-25 margin-bottom-25">
    <div class="display-flex-md align-items-baseline margin-bottom-10">
        <div class="text-size-16">V11</div>
        <div class="text-size-14 margin-left-10-md">Large progress with large icon and label</div>
    </div>
    <div class="StatusBar width-100pct display-flex align-items-center">
        <div class="flex-order-1 margin-right-5">
            <span class="rioglyph rioglyph-status-working text-color-status-working text-size-h2">
            </span>
        </div>
        <div class="display-flex flex-1-0 flex-order-2 align-items-center">
            <div class="flex-order-2 margin-left-10">
                <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-h3 text-bold">44%</span>
            </div>
            <div class="display-flex flex-1-0 flex-order-1">
                <div class="progress margin-0 flex-1-0 height-10">
                    <div class="progress-bar progress-bar-status-working" style="width: 44%;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="margin-top-25 margin-bottom-25">
    <div class="display-flex-md align-items-baseline margin-bottom-10">
        <div class="text-size-16">V12</div>
        <div class="text-size-14 margin-left-10-md">Large progress only</div>
    </div>
    <div class="StatusBar width-100pct display-flex align-items-center">
        <div class="display-flex flex-1-0">
            <div class="display-flex flex-1-0">
                <div class="progress margin-0 flex-1-0 height-10">
                    <div class="progress-bar progress-bar-info progress-divider" style="width: 25%;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | StatusBarIcon | — | The icon to be shown next to the progress bar. |
| └name | string | — | The class name of the icon i.e. "rioglyph-cruise-control". |
| └alignment | 'left' \| 'right' | 'left' | The position of the icon. |
| └color | string | 'text-color-gray' | The text color class name for the icon. |
| └className | string | — | Optional class names for the icon. |
| label | StatusBarLabel | — | The label to be shown for the progress bar. |
| └value | string \| React.ReactNode | — | The label content. |
| └alignment | 'left' \| 'top' \| 'right' | 'right' | The position of the icon. |
| └weight | 'light' \| 'bold' | 'bold' | The text weight of the label. |
| └color | string | 'text-color-gray' | The text color class name for the label. |
| └className | string | — | Optional class names for the label. |
| progress | StatusBarProgress[] | — | List of progress bars which will be stacked in given order if there are multiple. |
| └percentage | number | 0 | The percentage of the progress. |
| └color | string | 'progress-bar-info' | The color class name for the label. |
| └tooltip | string \| React.ReactNode | — | Optional tooltip content to be shown for the progress bar. |
| └tooltipPosition | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' | The position of the tooltip for the progress bar. |
| └tooltipDelay | number | 50 | The delay in milliseconds for when the tooltip is shown when hovering the progress bar. |
| └className | string | — | Optional class names for the progress bar. |
| size | 'small' \| 'large' | 'small' | The size of the icon and progress bar. Possible values are: 'small' 'large' |
| useProgressDivider | boolean | true | Uses a divider for multiple progress bars when defined. |
| className | string | — | Optional class names for the wrapper element. |