Error Page Component

[Hrithik-Gavankar]

Description

A reusable error page component for handling “Page Not Found” and other error states. It provides a standardized layout with customizable headings, descriptions, call-to-actions, and helpful links. The component is responsive, accessible, and extensible, ensuring a consistent user experience while guiding users back to key content or the home page.

This component complements existing PatternFly components by providing a dedicated, standardized error page pattern that can be reused across applications.

Feature Highlights / Variants

1. Standardised Layout

• Uses semantic HTML structure (<section>, <aside>, headings, lists) for consistency.
• Provides a recognizable template for error states such as 404, 403, 500, etc.

2. Customisable Messaging

• Configurable heading, subheading, and description text.
• Supports internationalization (i18n) and localization.

3. Action-Oriented Design

• Built-in slot for a primary CTA (e.g., “Back to home”).
• Optional list of helpful links (e.g., "Top pages").

4. Responsive Layout

• Distinct mobile vs. desktop rendering for form/CTA areas.
• Flexible grid alignment that adapts to screen size.

5. Accessibility (a11y)

• Proper heading hierarchy and semantic tags.
• Keyboard and screen-reader friendly.

6. Extensibility

• Pluggable slots/props for additional elements (search box, feedback form, support links).
• Can be reused for other error states with different props.

7. Styling & Theming

• Built with PatternFly tokens for typography, spacing, and colour consistency.
• Compatible with both light and dark themes.

Use Cases & Requirements

• Provide a standardized, reusable error page for applications.
• Offer customizable messaging, CTAs, and helpful links for better user guidance.
• Ensure responsive, accessible, and extensible design for all devices and user types.
• Create a consistent visual pattern across applications for error handling.

Where it is used today:

• Implemented as a reusable 404/error page component in internal projects and web applications also at access.redhat.com.

Why needed in PatternFly:

• Currently, no dedicated PatternFly component exists for standardised error pages.
• Provides a reusable and consistent template for multiple error states, improving UX and reducing redundant implementations across applications.

Why Existing Components Don’t Work

• Existing PatternFly components do not provide a full-page error layout.
• Current solutions require manual assembly of headings, messages, CTAs, and accessibility considerations for each implementation.
• A dedicated component ensures consistency, accessibility, and ease of use across applications.

Supporting Material:

Type of Request

• New Feature (not an enhancement).

[nicolethoen]

PatternFly does have a Missing Page component: https://www.patternfly.org/component-groups/error-communication/missing-page which may serve your purposes for this pattern? It’s one of PatternFly’s component groups!

[Hrithik-Gavankar]

Thank you so much, @nicolethoen 🙌

Yes, the Missing Page component under the Error Communication group perfectly fits our use case and covers the requirements we had in mind for this pattern.

Appreciate the quick reference — this resolves our issue.
Closing this one as the existing PatternFly component already serves the intended purpose.