# ErrorState

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/states
*Captured:* 2026-04-27T14:58:10.843Z

## ErrorState

A simple component to show an error to the user.

### Example: Something went wrong

Something went wrong

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
Try again

Condensed version example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
Try again

#### React (tsx)

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

import { dummyTextExtraShort } from '../../../utils/data';

export default () => (
    <>
        <ErrorState
            headline='Something went wrong'
            message={dummyTextExtraShort}
            buttons={[
                {
                    text: (
                        <>
                            <span className='rioglyph rioglyph-refresh' />
                            <span>Try again</span>
                        </>
                    ),
                    className: 'foobar',
                    onClick: () => Notification.info('Button pressed'),
                },
            ]}
        />
        <hr />
        <ErrorState
            headline='Condensed version example'
            message={dummyTextExtraShort}
            condensed
            buttons={[
                {
                    text: (
                        <>
                            <span className='rioglyph rioglyph-refresh' />
                            <span>Try again</span>
                        </>
                    ),
                    className: 'foobar',
                    onClick: () => Notification.info('Button pressed'),
                },
            ]}
        />
    </>
);
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <div class="text-size-h2 margin-bottom-20">
                <span class="rioglyph rioglyph-truck-breakdown text-color-light text-size-300pct">
                </span>
            </div>
            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Something went wrong</div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>
            <div class="btn-toolbar margin-top-20">
                <button class="btn margin-top-10 btn-primary foobar" type="button">
                    <span class="rioglyph rioglyph-refresh">
                    </span>
                    <span>Try again</span>
                </button>
            </div>
        </div>
    </div>
</div>
<hr>
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-10">
        <div class="display-flex flex-column align-items-center text-center padding-15">
            <div class="text-size-16 margin-bottom-10">
                <span class="rioglyph rioglyph-truck-breakdown text-color-light text-size-300pct">
                </span>
            </div>
            <div class="text-size-h4 line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Condensed version example</div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>
            <div class="btn-toolbar margin-top-20">
                <button class="btn margin-top-10 btn-primary foobar" type="button">
                    <span class="rioglyph rioglyph-refresh">
                    </span>
                    <span>Try again</span>
                </button>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

## NotFoundState

A simple component to show a message when something could not be found when searching or filtering data.

### Example: Nothing found

Nothing found

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
Refresh

#### React (tsx)

```tsx
import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Notification from '@rio-cloud/rio-uikit/Notification';
import { dummyTextShort } from '../../../utils/data';

export default () => (
    <NotFoundState
        headline='Nothing found'
        message={dummyTextShort}
        buttons={[
            {
                text: (
                    <>
                        <span className='rioglyph rioglyph-refresh' />
                        <span>Refresh</span>
                    </>
                ),
                className: 'foobar',
                onClick: () => Notification.info('Button pressed'),
            },
        ]}
    />
);
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <div class="text-size-h2 margin-bottom-20">
                <span class="rioglyph rioglyph-looking-glass-man text-color-light text-size-300pct">
                </span>
            </div>
            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Nothing found</div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
            <div class="btn-toolbar margin-top-20">
                <button class="btn margin-top-10 btn-primary foobar" type="button">
                    <span class="rioglyph rioglyph-refresh">
                    </span>
                    <span>Refresh</span>
                </button>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

## EmptyState

A simple component to show a message when there is no data yet. The user may perform a task first in order to see some data in that view.

### Example: There is no free lunch

There is no free lunch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
Add something

#### React (tsx)

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

import { dummyTextExtraShort } from '../../../utils/data';

export default () => (
    <EmptyState
        headline='There is no free lunch'
        message={dummyTextExtraShort}
        buttons={[
            {
                text: (
                    <span>
                        <span className='rioglyph rioglyph-plus margin-right-5' />
                        <span>Add something</span>
                    </span>
                ),
                onClick: () => Notification.info('Button pressed'),
            },
        ]}
    />
);
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <div class="text-size-h2 margin-bottom-20">
                <span class="rioglyph rioglyph-empty text-color-light text-size-300pct">
                </span>
            </div>
            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">There is no free lunch</div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>
            <div class="btn-toolbar margin-top-20">
                <button class="btn margin-top-10 btn-primary" type="button">
                    <span>
                        <span class="rioglyph rioglyph-plus margin-right-5">
                        </span>
                        <span>Add something</span>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

## ForbiddenState

A simple component to show a message when the access to a certain area is restricted.

### Example: Access not allowed

Access not allowed
You are not allowed to access this resource. Please contact your manager or administrator to gain access.
Request access

#### React (tsx)

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

export default () => (
    <ForbiddenState
        headline='Access not allowed'
        message={
            'You are not allowed to access this resource. ' +
            'Please contact your manager or administrator to gain access.'
        }
        buttons={[
            {
                text: 'Request access',
                onClick: () => Notification.info('Button pressed'),
            },
        ]}
    />
);
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <div class="text-size-h2 margin-bottom-20">
                <span class="rioglyph rioglyph-ban-circle text-color-light text-size-300pct">
                </span>
            </div>
            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Access not allowed</div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">You are not allowed to access this resource. Please contact your manager or administrator to gain access.</div>
            <div class="btn-toolbar margin-top-20">
                <button class="btn margin-top-10 btn-primary" type="button">Request access</button>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

## MaintenanceState

A simple component to show a message when a service is in maintenance.

### Example: Service in maintenance

Service in maintenance
We are sorry for the inconvenience. The interruption will be resolved shortly.

#### React (tsx)

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

export default () => (
    <MaintenanceState
        headline='Service in maintenance'
        message='We are sorry for the inconvenience. The interruption will be resolved shortly.'
    />
);
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <div class="text-size-h2 margin-bottom-20">
                <span class="rioglyph rioglyph-wrench text-color-light text-size-300pct">
                </span>
            </div>
            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Service in maintenance</div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">We are sorry for the inconvenience. The interruption will be resolved shortly.</div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

## CustomState

All state components above are based on the more flexible CustomState component. Use this if you need something to be shown which cannot be accomplished otherwise.

### Example: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
Do something button Primary call to action

#### React (tsx)

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

import { dummyTextExtraShort } from '../../../utils/data';

export default () => (
    <CustomState
        headline='Lorem ipsum dolor sit amet'
        message={dummyTextExtraShort}
        data-testid='demo-test'
        icons={[
            {
                name: 'rioglyph-ok-sign',
                color: 'text-color-highlight',
                className: 'text-size-300pct',
            },
        ]}
        buttons={[
            {
                text: <span>Do something button</span>,
                bsStyle: 'default',
                className: 'foobar',
                onClick: () => Notification.info('Button pressed'),
            },
            {
                text: <span>Primary call to action</span>,
                className: 'foobar',
                onClick: () => Notification.info('Button pressed'),
            },
        ]}
    />
);
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct" data-testid="demo-test">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <div class="text-size-h2 margin-bottom-20 display-flex align-items-center max-width-100pct">
                <span class="rioglyph rioglyph-ok-sign text-color-highlight text-size-300pct">
                </span>
            </div>
            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Lorem ipsum dolor sit amet</div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>
            <div class="btn-toolbar margin-top-20 justify-content-center-xs">
                <button class="btn margin-top-10 btn-default foobar" type="button">
                    <span>Do something button</span>
                </button>
                <button class="btn margin-top-10 btn-primary foobar" type="button">
                    <span>Primary call to action</span>
                </button>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

### Example: You don't have access to this issue

You don't have access to this issue
Make sure the issue exists in this project. If it does, ask a project admin for permission to see the project's issues.
View permissions Request access
Learn more

#### React (tsx)

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

export default () => (
    <CustomState
        headline={<span>You don't have access to this issue</span>}
        message={
            <span>
                Make sure the issue exists in this project. If it does, ask a project admin for permission to see the
                project's issues.
            </span>
        }
        buttons={[
            {
                text: <span>View permissions</span>,
                bsStyle: 'default',
                onClick: () => Notification.info('Button pressed'),
            },
            {
                text: <span>Request access</span>,
                onClick: () => Notification.info('Button pressed'),
            },
            {
                text: <span>Learn more</span>,
                className: 'btn-link',
                href: '#',
            },
        ]}
    />
);
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">
                <span>You don't have access to this issue</span>
            </div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                <span>Make sure the issue exists in this project. If it does, ask a project admin for permission to see the project's issues.</span>
            </div>
            <div class="btn-toolbar margin-top-20 justify-content-center-xs">
                <button class="btn margin-top-10 btn-default" type="button">
                    <span>View permissions</span>
                </button>
                <button class="btn margin-top-10 btn-primary" type="button">
                    <span>Request access</span>
                </button>
            </div>
            <div class="btn-toolbar">
                <a class="margin-top-15 btn-link" href="#">
                    <span>Learn more</span>
                </a>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

## NotBookedState

A simple component to show a message when Service content requires a Marketplace booking.

### Example: Premium feature

Premium feature
Book Timed now and get access to the following and many more special features
Residual driving times and break periods are clearly displayed. This enables you to avoid costly driving time violations.
The driver’s activities are transmitted automatically and archived on the platform for 90 days.

#### React (tsx)

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

export default () => (
    <NotBookedState
        headline='Premium feature'
        message='Book Timed now and get access to the following and many more special features'
        features={[
            'Residual driving times and break periods are clearly displayed. This enables you to avoid costly driving time violations.',
            'The driver’s activities are transmitted automatically and archived on the platform for 90 days.',
        ]}
    >
        <iframe className='buyButton' src='https://buybutton.marketplace.rio.cloud/?productId=RIO-SKU00000027' />
    </NotBookedState>
);
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <div class="text-size-h2 margin-bottom-20 display-flex align-items-center max-width-100pct">
                <span class="rioglyph rioglyph-stars text-color-primary text-size-300pct">
                </span>
            </div>
            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Premium feature</div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                <div class="text-medium margin-bottom-20">Book Timed now and get access to the following and many more special features</div>
                <ul class="feature-list icon-list margin-x-10pct-ls margin-y-10 text-size-12 text-size-14-sm" id="features">
                    <li class="padding-x-15 bg-lightest rounded rounded-large border-none display-flex align-items-center gap-2 text-left">
                        <span class="rioglyph rioglyph-ok text-color-primary">
                        </span>
                        <span class="text-color-darker">Residual driving times and break periods are clearly displayed. This enables you to avoid costly driving time violations.</span>
                    </li>
                    <li class="padding-x-15 bg-lightest rounded rounded-large border-none display-flex align-items-center gap-2 text-left">
                        <span class="rioglyph rioglyph-ok text-color-primary">
                        </span>
                        <span class="text-color-darker">The driver’s activities are transmitted automatically and archived on the platform for 90 days.</span>
                    </li>
                </ul>
            </div>
            <div class="width-500 max-width-100pct margin-top-25">
                <iframe class="buyButton" src="https://buybutton.marketplace.rio.cloud/?productId=RIO-SKU00000027">
                </iframe>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| features | string \| React.ReactNode[] | — | List of features. |

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

## Fully customized state

### Example: Stay tuned

Stay tuned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

#### React (tsx)

```tsx
import CustomState from '@rio-cloud/rio-uikit/CustomState';
import { dummyTextShort } from '../../../utils/data';

const image = (
    <img
        className='max-width-500'
        src='https://cdn.rio.cloud/svg/dashboard/dashboard_coming_soon.svg'
        alt='Coming soon'
    />
);

export default () => <CustomState headline='Stay tuned' message={dummyTextShort} fullWidth image={image} />;
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <img class="max-width-500" src="https://cdn.rio.cloud/svg/dashboard/dashboard_coming_soon.svg" alt="Coming soon">
            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Stay tuned</div>
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

### Example: End User License AgreementCurrently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may still choose to accept it voluntarily.

End User License Agreement
Currently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may still choose to accept it voluntarily.

Back to home Proceed with EULA

#### React (tsx)

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

export default () => (
    <CustomState
        message={
            <div className='display-flex flex-column gap-15'>
                <span className='text-size-h1'>
                    <span
                        className='rioglyph text-size-300pct '
                        style={{ ['--i' as string]: 'url(https://cdn.rio.cloud/riosvg/custom/eu-data-act.svg)' }}
                    />
                </span>
                <div className='text-bold text-size-20'>End User License Agreement</div>
                <div>
                    Currently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may
                    still choose to accept it voluntarily.
                </div>
            </div>
        }
        buttons={[
            {
                text: <span>Back to home</span>,
                bsStyle: 'default',
            },
            {
                text: <span>Proceed with EULA</span>,
            },
        ]}
    />
);
```

#### HTML (html)

```html
<div class="display-flex justify-content-center max-width-100pct">
    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15">
        <div class="display-flex flex-column align-items-center text-center padding-25">
            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                <div class="display-flex flex-column gap-15">
                    <span class="text-size-h1">
                        <span class="rioglyph text-size-300pct " style="--i: url(https://cdn.rio.cloud/riosvg/custom/eu-data-act.svg);">
                        </span>
                    </span>
                    <div class="text-bold text-size-20">End User License Agreement</div>
                    <div>Currently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may still choose to accept it voluntarily.</div>
                </div>
            </div>
            <div class="btn-toolbar margin-top-20 justify-content-center-xs">
                <button class="btn margin-top-10 btn-default" type="button">
                    <span>Back to home</span>
                </button>
                <button class="btn margin-top-10 btn-primary" type="button">
                    <span>Proceed with EULA</span>
                </button>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |

## Table with a state

### Example: We couldn't find anything that matches your search

NotFoundState when search or filter don't return any matching item
Head Column Head Column Head Column Head Column Head Column

We couldn't find anything that matches your search
Please refine your search and check spelling and spacing.

EmptyState when no item has been created yet
Head Column Head Column Head Column Head Column Head Column

No tracked events for this order
Events appear when when the order is shared with other users and the order state is active.
Learn how to start tracking order events

#### React (tsx)

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

export default () => (
    <div>
        <h5>NotFoundState when search or filter don't return any matching item</h5>
        <table className='table table-head-filled table-layout-fixed'>
            <thead>
                <tr>
                    {[...Array(5)].map(() => (
                        <th key={crypto.randomUUID()} className='ellipsis-1'>
                            Head Column
                        </th>
                    ))}
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colSpan={5}>
                        <NotFoundState
                            headline="We couldn't find anything that matches your search"
                            message='Please refine your search and check spelling and spacing.'
                            outerClassName='border-none'
                        />
                    </td>
                </tr>
            </tbody>
        </table>
        <hr className='border-color-light margin-y-25' />
        <h5>EmptyState when no item has been created yet</h5>
        <table className='table table-head-filled table-layout-fixed'>
            <thead>
                <tr>
                    {[...Array(5)].map(() => (
                        <th key={crypto.randomUUID()} className='ellipsis-1'>
                            Head Column
                        </th>
                    ))}
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colSpan={5}>
                        <EmptyState
                            headline='No tracked events for this order'
                            message={
                                'Events appear when when the order is shared with other users and the order ' +
                                'state is active.'
                            }
                            outerClassName='border-none'
                            buttons={[
                                {
                                    text: 'Learn how to start tracking order events',
                                    href: '#',
                                },
                            ]}
                        />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
);
```

#### HTML (html)

```html
<div>
    <h5>NotFoundState when search or filter don't return any matching item</h5>
    <table class="table table-head-filled table-layout-fixed">
        <thead>
            <tr>
                <th class="ellipsis-1">Head Column</th>
                <th class="ellipsis-1">Head Column</th>
                <th class="ellipsis-1">Head Column</th>
                <th class="ellipsis-1">Head Column</th>
                <th class="ellipsis-1">Head Column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="5">
                    <div class="display-flex justify-content-center max-width-100pct">
                        <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15 border-none">
                            <div class="display-flex flex-column align-items-center text-center padding-25">
                                <div class="text-size-h2 margin-bottom-20">
                                    <span class="rioglyph rioglyph-looking-glass-man text-color-light text-size-300pct">
                                    </span>
                                </div>
                                <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">We couldn't find anything that matches your search</div>
                                <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">Please refine your search and check spelling and spacing.</div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <hr class="border-color-light margin-y-25">
    <h5>EmptyState when no item has been created yet</h5>
    <table class="table table-head-filled table-layout-fixed">
        <thead>
            <tr>
                <th class="ellipsis-1">Head Column</th>
                <th class="ellipsis-1">Head Column</th>
                <th class="ellipsis-1">Head Column</th>
                <th class="ellipsis-1">Head Column</th>
                <th class="ellipsis-1">Head Column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="5">
                    <div class="display-flex justify-content-center max-width-100pct">
                        <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15 border-none">
                            <div class="display-flex flex-column align-items-center text-center padding-25">
                                <div class="text-size-h2 margin-bottom-20">
                                    <span class="rioglyph rioglyph-empty text-color-light text-size-300pct">
                                    </span>
                                </div>
                                <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">No tracked events for this order</div>
                                <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">Events appear when when the order is shared with other users and the order state is active.</div>
                                <div class="btn-toolbar margin-top-20">
                                    <a class="margin-top-15" href="#">Learn how to start tracking order events</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The icon to be shown. Default icons are defined for all states. |
| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |
| └name | string | — | The name of the icon |
| └className | string | 'text-size-300pct' | Optional class names for this icon. |
| └color | string | 'text-color-light' | Optional color class name for the icon. |
| image | React.ReactNode | — | Custom Image if needed. |
| headline | string \| React.ReactNode | — | The headline to be shown. |
| message | string \| React.ReactNode | — | The text to display. |
| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |
| └text | string \| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |
| └onClick | VoidFunction | () => {} | Callback fired after the component starts to collapse. |
| └href | string | — | Instead of a callback for the button you can specify a "href". This way it will render a link button instead. |
| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |
| └className | string | — | Additional classes assigned to the button. |
| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |
| condensed | boolean | false | Smaller icon and headline size. |
| alignment | TextAlignment | 'center' | Defines where the panel is aligned. Possible values are: 'left' 'center' 'right' |
| outerClassName | string | — | Optional class names for the wrapper. |
| innerClassName | string | — | Optional class names for the content. |
| children | any | — | Additional elements that are rendered below the headline and text. |