# Notification

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

Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.

## Notification

Hint: Notifications need to be wrapped by a NotificationsContainer inside your application layout body.

Please check out the notifications guidelines here.

### Example: Notifications

Notifications
Default notification
Info notification Success notification Warning notification Error notification

Notifications with options
Info Success Warning Error
Note

Use notifications with a progress bar only when the user should interact with the notification for example when adding a link or a button.

#### React (tsx)

```tsx
import Notification from '@rio-cloud/rio-uikit/Notification';
import Divider from '@rio-cloud/rio-uikit/Divider';
import Button from '@rio-cloud/rio-uikit/Button';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
import { Note } from '../../../components/Note';

// Note: make sure you have set up the NotificationContainer

export default () => (
    <>
        <FormLabel>Notifications</FormLabel>
        <div className='margin-bottom-20'>
            <Button onClick={() => Notification.default('Your report is being generated')}>Default notification</Button>
        </div>
        <div className='btn-toolbar margin-bottom-20'>
            <Button bsStyle='info' onClick={() => Notification.info('Info message')}>
                Info notification
            </Button>
            <Button bsStyle='success' onClick={() => Notification.success('Success message')}>
                Success notification
            </Button>
            <Button bsStyle='warning' onClick={() => Notification.warning('Warning message')}>
                Warning notification
            </Button>
            <Button bsStyle='danger' onClick={() => Notification.error('Error message')}>
                Error notification
            </Button>
        </div>
        <Divider spacing={25} />
        <FormLabel>Notifications with options</FormLabel>
        <ButtonToolbar>
            <Button
                bsStyle='info'
                onClick={() => {
                    Notification.info(
                        <div>
                            <div className='margin-bottom-5'>Lorem ipsum dolor sit amet </div>
                            <a href='#' onClick={event => event.stopPropagation()}>
                                <span>Read more information here</span>
                                <span className='rioglyph rioglyph-new-window margin-left-5' />
                            </a>
                        </div>,
                        {
                            title: 'Info title',
                            timeout: 10_000,
                            closeButton: true,
                            hideProgressBar: false,
                            callback: () => {
                                Notification.success('Clicked');
                            },
                        }
                    );
                }}
            >
                Info
            </Button>
            <Button
                bsStyle='success'
                onClick={() => {
                    Notification.success(
                        <div>
                            <a href='#' onClick={event => event.stopPropagation()}>
                                See all appointments here
                            </a>
                        </div>,
                        {
                            title: 'Appointment created successfully',
                            timeout: 10_000,
                            closeButton: true,
                            hideProgressBar: false,
                            callback: () => {
                                Notification.success('Clicked');
                            },
                        }
                    );
                }}
            >
                Success
            </Button>
            <Button
                bsStyle='warning'
                onClick={() => {
                    Notification.warning(
                        <div>
                            <div className='margin-bottom-10'>Lorem ipsum dolor sit amet </div>
                            <Button bsStyle='warning' variant='outline' onClick={event => event.stopPropagation()}>
                                Retry
                            </Button>
                        </div>,
                        {
                            title: 'Warning title',
                            timeout: 10_000,
                            closeButton: true,
                            hideProgressBar: false,
                            callback: () => {
                                Notification.success('Clicked');
                            },
                        }
                    );
                }}
            >
                Warning
            </Button>
            <Button
                bsStyle='danger'
                onClick={() => {
                    Notification.error(
                        <div>
                            <div className='margin-bottom-10'>Lorem ipsum dolor sit amet </div>
                            <Button bsStyle='danger' variant='outline' onClick={event => event.stopPropagation()}>
                                Retry
                            </Button>
                        </div>,
                        {
                            title: 'Error title',
                            timeout: 10_000,
                            closeButton: true,
                            hideProgressBar: false,
                            callback: () => {
                                Notification.success('Clicked');
                            },
                        }
                    );
                }}
            >
                Error
            </Button>
        </ButtonToolbar>
        <div className='margin-top-25 display-inline-flex'>
            <Note />
            Use notifications with a progress bar only when the user should interact with the notification for example
            when adding a link or a button.
        </div>
    </>
);
```

#### HTML (html)

```html
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Notifications</div>
<div class="margin-bottom-20">
    <button type="button" class="btn btn-default btn-component" tabindex="0">Default notification</button>
</div>
<div class="btn-toolbar margin-bottom-20">
    <button type="button" class="btn btn-info btn-component" tabindex="0">Info notification</button>
    <button type="button" class="btn btn-success btn-component" tabindex="0">Success notification</button>
    <button type="button" class="btn btn-warning btn-component" tabindex="0">Warning notification</button>
    <button type="button" class="btn btn-danger btn-component" tabindex="0">Error notification</button>
</div>
<div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
    <div class="divider-line bg-light" style="width: 100%; height: 1px;">
    </div>
</div>
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Notifications with options</div>
<div class="btn-toolbar">
    <button type="button" class="btn btn-info btn-component" tabindex="0">Info</button>
    <button type="button" class="btn btn-success btn-component" tabindex="0">Success</button>
    <button type="button" class="btn btn-warning btn-component" tabindex="0">Warning</button>
    <button type="button" class="btn btn-danger btn-component" tabindex="0">Error</button>
</div>
<div class="margin-top-25 display-inline-flex">
    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
        <div>
            <span class="label label-info label-condensed label-filled">Note</span>
        </div>
        <div class="width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1">
        </div>
    </div>Use notifications with a progress bar only when the user should interact with the notification for example when adding a link or a button.
</div>
```

#### Props (json)

```json
<ApplicationLayout>
    <ApplicationLayout.Header>...</ApplicationLayout.Header>
    <ApplicationLayout.Body>
        <NotificationsContainer />
        ...
    </ApplicationLayout.Body>
    ...
</ApplicationLayout>
```

### Example: Example 2

Copy to clipboard notification example

#### React (tsx)

```tsx
import { useEffect, useRef } from 'react';

import Notification from '@rio-cloud/rio-uikit/Notification';
import Button from '@rio-cloud/rio-uikit/Button';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import useClipboard from '@rio-cloud/rio-uikit/useClipboard';

// Note: make sure you have set up the NotificationContainer

export default () => {
    const inputRef = useRef<HTMLInputElement>(null);

    const clipboard = useClipboard();

    const handleCopyToClipboard = () => clipboard.copy(inputRef.current?.value ?? '');

    useEffect(() => {
        clipboard.copied && Notification.default('Value copied to clipboard');
    }, [clipboard.copied]);

    return (
        <div className='max-width-250'>
            <div className='form-group'>
                <FormLabel htmlFor='totalLength'>Copy to clipboard notification example</FormLabel>
                <div className='input-group'>
                    <input id='totalLength' className='form-control' type='text' defaultValue='6.52' ref={inputRef} />
                    <div className='input-group-addon padding-right-0'>
                        <Button
                            bsStyle='muted'
                            iconName='rioglyph-duplicate'
                            iconOnly
                            className='hover-bg-none'
                            onClick={handleCopyToClipboard}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-250">
    <div class="form-group">
        <label for="totalLength" class="display-inline-block">
            <span>Copy to clipboard notification example</span>
        </label>
        <div class="input-group">
            <input id="totalLength" class="form-control" type="text" value="6.52">
            <div class="input-group-addon padding-right-0">
                <button type="button" class="btn btn-muted btn-icon-only btn-component hover-bg-none" tabindex="0">
                    <span class="rioglyph rioglyph-duplicate">
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
<ApplicationLayout>
    <ApplicationLayout.Header>...</ApplicationLayout.Header>
    <ApplicationLayout.Body>
        <NotificationsContainer />
        ...
    </ApplicationLayout.Body>
    ...
</ApplicationLayout>
```