Skip to content
Gusto’s condensed “G” logoWorkbench

Crash

Crash is used to contain an error due to a network or load failure so users can continue interacting with the rest of the app.
A pointing to the illustration within Crash; B pointing to the heading; C pointing to the 'Try again' button;
Crash and its sub-components
Anatomy of the Crash component
ItemNameDescription
A<Warning />Decorative element
B<Heading />Title of the Crash
C<Button />Action the user needs to take to resolve the error
Breakdown of Crash styles (padding, height, widths, etc.) when the default variant is used
The large size is recommended for most use cases where parent container height is >300px
Breakdown of Crash styles (padding, height, widths, etc.) when the compact variant is used
The medium size is used for errors where parent container height is <300px
An error occurred

We can't load this page

import React from 'react'


import { Crash } from '@gusto/workbench'


function onRetry() {}


export const Basic = () => {
  return (
    <Crash
      headingText="We can't load this page"
      retryAriaLabel="Reload this page"
      onRetry={onRetry}
    />
  )
}
An error occurred

We can't load this section

import React from 'react'


import { Crash } from '@gusto/workbench'


function onRetry() {}


export const Compact = () => {
  return (
    <Crash
      headingText="We can't load this section"
      retryAriaLabel="Reload this section"
      onRetry={onRetry}
      size="medium"
    />
  )
}
React props
NameTypeDefaultDescription
size  
mediumlarge
largeSize of Crash.
headingLevel  
number
3Semantic heading level that will be applied to the headingText.
headingText  Required
string
-Title of the Crash.
onRetry  Required
function
-Callback when the user clicks the "Try again" button.
retryAriaLabel  Required
string
-Label that replaces the visible label on the “Try again” button for users who use assistive technology.
  • Use the right heading level based on the Crash’s placement on the page. For example, if Crash is the only heading on the page, use h1. If it appears after an h1 title, use h2.For more information, see footnote 1,

The following testing snippet(s) offer suggestions for testing the component using React Testing LibraryExternal link with occasional help from JestExternal link.

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Crash } from '@gusto/workbench';


it('tests for basic render and functionality', () => {
  const mock = jest.fn();
  render(
    <Crash
      headingText="We can't load this page"
      retryAriaLabel="Reload this page"
      onRetry={mock}
    />,
  );


  expect(screen.getByRole('heading', { name: "We can't load this page" })).toBeInTheDocument();
  screen.getByRole('button', { name: 'Reload this page' }).click();
  expect(mock).toHaveBeenCalledTimes(1);
});