Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
DocumentationAtomsError

Error

This component appears if a page is down

Basic Usage

import { Error } from '@krakentech/coral';
 
<Error />

Uh oh...

Don't worry, it's us not you

This is unusual - logging out and in again may help. If it doesn't, these things usually clear themselves up reasonably quickly, so perhaps grab a cuppa.

Properties

errorCode

<Error errorCode="KLT1234" />

Uh oh... KLT1234

Don't worry, it's us not you

This is unusual - logging out and in again may help. If it doesn't, these things usually clear themselves up reasonably quickly, so perhaps grab a cuppa.

heading

<Error heading="Custom heading" />

Custom heading

Don't worry, it's us not you

This is unusual - logging out and in again may help. If it doesn't, these things usually clear themselves up reasonably quickly, so perhaps grab a cuppa.

message

<Error message="Custom message" />

Uh oh...

Don't worry, it's us not you

Custom message

subheading

<Error subheading="Custom subheading" />

Uh oh...

Custom subheading

This is unusual - logging out and in again may help. If it doesn't, these things usually clear themselves up reasonably quickly, so perhaps grab a cuppa.

Contained

<Container maxWidth={320}>
    <Error />
</Container>

Uh oh...

Don't worry, it's us not you

This is unusual - logging out and in again may help. If it doesn't, these things usually clear themselves up reasonably quickly, so perhaps grab a cuppa.

Full API

NameTypeDefault
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};
headingstring

The heading to display to the user.

Uh oh...
subheadingstring

The subheading to display to the user.

Don't worry, it's us not you
messageReactNode

A custom message element which is internally wrapped by a <Typography>. This should only be used with text content.

This is unusual - logging out and in again may help. If it doesn't, these things usually clear themselves up reasonably quickly, so perhaps grab a cuppa.
errorCodestring

The error code to display.

Design

Good to know

This component should only appear if there is a problem with a page, such as it being down. This error makes is clear to the user they haven’t done anything wrong, which is also why we have chosen to steer away form using red.

Can I remove the message?

The message within this card is super important in order to not scare or agitate users. Although we don’t need to go in to detail about whats happened (as it is likely too technical) we want the user to know they don’t need to do anything and it should be resolved asap. This message can be customised of cause to match the scenario.

Why isn’t there a phone number?

Due to the nature of these errors (which is usually resolved on the day) we don’t want to inundate ops with calls as a result of the number of people who might contact us straight away.

Component breakdown

  • Corner radius: 16px
  • Item padding: 16px | Horizontal padding: 24px | Vertical padding: 24px
  • Heading: H1
  • Subheading: H5
  • Copy: Body copy 2
  • Error code: Caption text
Last updated on
DropdownErrorMessage