Error templates

Both graphics and localized texts are already included in ready-to-use templates. Read more about localization in i18n.

import React from 'react';
import {
  AccessDenied,
  Maintenance,
  PageError,
  PageNotFound,
  ProjectNotFound,
} from '@semcore/errors';

const Demo = () => (
  <>
    <AccessDenied />
    <Maintenance toolName={'Intergalactic'} />
    <PageNotFound />
    <ProjectNotFound />
    <PageError />
  </>
);

export default Demo;

Custom error

You can create a custom error message. In the Error package, you will find the getIconPath feature, which will allow you to get the latest versions of illustrations. The full list of illustrations can be found in Illustration.

import React from 'react';
import Error, { getIconPath } from '@semcore/errors';
import Button from '@semcore/button';

const Demo = () => (
  <Error icon={getIconPath('confirmation')}>
    <Error.Title>Confirm you are a real person</Error.Title>
    <Error.Description wMax={510}>
      We need to make sure you're not a robot. Please complete the security check, and we'll be out
      of your way.
    </Error.Description>
    <Error.Controls>
      <Button size='l' use='primary' theme='info'>
        Submit
      </Button>
    </Error.Controls>
  </Error>
);

export default Demo;