# Activity

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

## Activity

### Example: Example 1

Small size: 0:24 h
0:24 h
0:24 h
0:24 h 1 3 Default size: 0:24 h
0:24 h
0:24 h
0:24 h Default size without duration:

Outdated activities: 0:24 h
0:24 h
0:24 h
0:24 h Large size: 0:24 h
0:24 h
0:24 h
0:24 h Extra large size: 0:24 h
0:24 h
0:24 h
0:24 h

#### React (tsx)

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

const duration = '0:24 h';

export default () => (
    <div>
        <label>Small size:</label>
        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_SM} />
            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_SM} />
            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_SM} />
            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_SM} />
            <span className='badge padding-y-4 badge-danger'>1</span>
            <span className='badge padding-y-4 badge-warning'>3</span>
        </div>

        <label>Default size:</label>
        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
            <Activity activity={Activity.AVAILABLE} duration={duration} />
            <Activity activity={Activity.DRIVING} duration={duration} />
            <Activity activity={Activity.RESTING} duration={duration} />
            <Activity activity={Activity.WORKING} duration={duration} />
        </div>

        <label>Default size without duration:</label>
        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
            <Activity activity={Activity.AVAILABLE} />
            <Activity activity={Activity.DRIVING} />
            <Activity activity={Activity.RESTING} />
            <Activity activity={Activity.WORKING} />
        </div>

        <label>Outdated activities:</label>
        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
            <Activity activity={Activity.AVAILABLE} duration={duration} isOutdated />
            <Activity activity={Activity.DRIVING} duration={duration} isOutdated />
            <Activity activity={Activity.RESTING} duration={duration} isOutdated />
            <Activity activity={Activity.WORKING} duration={duration} isOutdated />
        </div>

        <label>Large size:</label>
        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_LG} />
            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_LG} />
            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_LG} />
            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_LG} />
        </div>

        <label>Extra large size:</label>
        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_XL} />
            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_XL} />
            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_XL} />
            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_XL} />
        </div>
    </div>
);
```

#### HTML (html)

```html
<div>
    <label>Small size:</label>
    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
        <div class="activity activity-available activity-sm">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-available">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-driving activity-sm">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-driving">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-resting activity-sm">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-resting">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-working activity-sm">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-working">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <span class="badge padding-y-4 badge-danger">1</span>
        <span class="badge padding-y-4 badge-warning">3</span>
    </div>
    <label>Default size:</label>
    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
        <div class="activity activity-available">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-available">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-driving">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-driving">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-resting">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-resting">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-working">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-working">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
    </div>
    <label>Default size without duration:</label>
    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
        <div class="activity activity-available">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-available">
                </span>
            </span>
        </div>
        <div class="activity activity-driving">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-driving">
                </span>
            </span>
        </div>
        <div class="activity activity-resting">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-resting">
                </span>
            </span>
        </div>
        <div class="activity activity-working">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-working">
                </span>
            </span>
        </div>
    </div>
    <label>Outdated activities:</label>
    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
        <div class="activity activity-available opacity-50">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-available">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-driving opacity-50">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-driving">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-resting opacity-50">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-resting">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-working opacity-50">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-working">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
    </div>
    <label>Large size:</label>
    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
        <div class="activity activity-available activity-lg">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-available">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-driving activity-lg">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-driving">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-resting activity-lg">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-resting">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-working activity-lg">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-working">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
    </div>
    <label>Extra large size:</label>
    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
        <div class="activity activity-available activity-xl">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-available">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-driving activity-xl">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-driving">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-resting activity-xl">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-resting">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
        <div class="activity activity-working activity-xl">
            <span class="activity-icon">
                <span class="rioglyph rioglyph-status-working">
                </span>
            </span>
            <span class="activity-text">0:24 h</span>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| activity | ActivityStatus | — | Defines the type of activity. Possible values are Activity.AVAILABLE, Activity.DRIVING, Activity.RESTING or Activity.WORKING. |
| bsSize | ActivitySize | — | Define how large the component should be rendered. Possible values are Activity.SIZE_SM, Activity.SIZE_LG or Activity.SIZE_XL. |
| duration | string \| ReactNode | — | The actual duration value to be shown. |
| isOutdated | boolean | false | Indicates whether the activity is outdated. |
| onClick | VoidFunction | — | Callback function for when the component is clicked. |
| className | string | — | Additional classes for the wrapper element. |