Error Block

ErrorBlock is a centered error status layout built on MUI.

Installation

npm

npm install @nodeblocks/frontend-error-block

yarn

yarn add @nodeblocks/frontend-error-block

pnpm

pnpm add @nodeblocks/frontend-error-block

bun

bun add @nodeblocks/frontend-error-block

What You Need

Item	Why it matters
errorTitle	Main heading shown in the title block
subtitle	Supporting message below the title
actionHref	Destination URL for the primary action button
actionText	Label for the primary action button
titleErrorCode (optional)	Short code or label shown above the title (for example, Error 404)

Static content props

ErrorBlock does not manage message state. Pass copy and links directly as props.

Code Examples

Quick Start

Live Editor

function Example() {
  return (
    <ErrorBlock
      errorTitle="Page not found"
      subtitle="Page you're trying to reach was not found or no longer exists."
      actionHref="#home"
      actionText="Back to Home"
    />
  );
}

Result

Loading...

Labels and URLs

Live Editor

function Example() {
  return (
    <ErrorBlock
      errorTitle="Server connection failed"
      subtitle="Unable to reach our servers. Check your connection and try again."
      actionHref="#dashboard"
      actionText="Back to Dashboard"
      titleErrorCode="Error 500"
    />
  );
}

Result

Loading...

Compound Components

Use child blocks to customize copy, links, and styling. Pass content on sub-components instead of the root.

Live Editor

function Example() {
  return (
    <ErrorBlock errorTitle="Page not found" subtitle="" actionHref="" actionText="">
      <ErrorBlock.Icon sx={{fontSize: 70}} fontSize="large" />
      <ErrorBlock.Title titleErrorCode="Error 404" />
      <ErrorBlock.Subtitle>Page you're trying to reach was not found or no longer exists.</ErrorBlock.Subtitle>
      <ErrorBlock.Action actionHref="#home" actionText="Back to Home" />
    </ErrorBlock>
  );
}

Result

Loading...

Block Override

Use function children to override default blocks and order.

Live Editor

function Example() {
  return (
    <ErrorBlock
      errorTitle="Something went wrong"
      subtitle="We encountered an unexpected error. Please try again or contact support if the problem persists."
      actionHref="#home"
      actionText="Back to Home"
      titleErrorCode="Error 503"
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          ...defaultBlocks,
          troubleshooting: (
            <div
              style={{
                background: '#eef4ff',
                border: '1px solid #cddcff',
                borderRadius: '8px',
                padding: '12px',
                fontSize: '14px',
                textAlign: 'left',
              }}
            >
              Try refreshing the page or clearing your browser cache.
            </div>
          ),
        },
        blockOrder: ['icon', 'title', 'subtitle', 'troubleshooting', 'action'],
      })}
    </ErrorBlock>
  );
}

Result

Loading...

When to use block overrides

Use overrides when you need to change block order, replace default UI blocks, or inject custom content between icon, title, subtitle, and action.

Important Props

Core Props

Prop	Type	Required	Default	Description
errorTitle	string	Yes	-	Main error heading
subtitle	string	Yes	-	Supporting message below the title
actionHref	string	Yes	-	href for the primary action button
actionText	string	Yes	-	Label for the primary action button

Content Props

Prop	Type	Required	Default	Description
titleErrorCode	string	No	undefined	Optional code or label rendered above errorTitle

Layout and Composition Props

Prop	Type	Required	Default	Description
children	BlocksOverride | ReactNode	No	undefined	Compound sub-components or a block override function
spacing	StackProps['spacing']	No	4	Vertical spacing between rendered blocks
blockSpacingBefore	Record<string, StackProps['spacing']>	No	{ title: { xs: 2, sm: 3 }, action: { xs: 4, sm: 6 } }	Adds top margin before specific blocks (icon, title, subtitle, action)
className	string	No	undefined	Class name for the root container (also applies nbb-error-block)
sx	SxProps	No	undefined	MUI system styles for the root Stack

ErrorBlock inherits StackProps (except children), so standard layout props are supported on the root. Default block order is icon → title → subtitle → action.

Sub-components read values from context and accept partial MUI props:

• ErrorBlock.Icon — ErrorOutlined props (sx, className, …)
• ErrorBlock.Title — Typography props plus optional titleErrorCode, errorTitle, or children
• ErrorBlock.Subtitle — Typography props plus optional subtitle or children
• ErrorBlock.Action — Button props plus optional actionHref, actionText, or children

Default UI Blocks

Block	Built on	Notes
ErrorBlock (root)	Stack	Centered container with maxWidth: 350, textAlign="center", and default spacing={4}
ErrorBlock.Icon	ErrorOutlined	48px icon using secondary.main
ErrorBlock.Title	Typography (variant="h4")	Renders titleErrorCode (when set) above the title
ErrorBlock.Subtitle	Typography	Subtitle copy from subtitle
ErrorBlock.Action	Button (variant="contained")	Navigates to actionHref

TypeScript

import {ErrorBlock} from '@nodeblocks/frontend-error-block';
import type {ComponentProps} from 'react';

type ErrorBlockProps = ComponentProps<typeof ErrorBlock>;

function NotFoundError(props: Pick<ErrorBlockProps, 'actionHref' | 'actionText'>) {
  return (
    <ErrorBlock
      errorTitle="Page not found"
      subtitle="The page you requested does not exist or was moved."
      titleErrorCode="Error 404"
      {...props}
    />
  );
}