Version

Error Message

Displays an error message centered both vertically and horizontally inside the parent container.

Error Message

Example
<div id="error-message"></div>
:global(.parent) {
height: 450px;
}
import {render} from 'react-dom';
import React from 'react';

import ErrorMessage from '@jetbrains/ring-ui/components/error-message/error-message';
import Link from '@jetbrains/ring-ui/components/link/link';
import {FrownIcon} from '@jetbrains/ring-ui/components/icon';


const renderErrorMessageDemo = () => (
<div className='parent'>
  <ErrorMessage
    icon={FrownIcon}
    code="Disconnected"
    message="no answer from server."
    description="Please try again soon."
  >
    <Link href="/">Go to the home page</Link>
  </ErrorMessage>
</div>
);

render(renderErrorMessageDemo(), document.getElementById('error-message'));