Page Not Found

Overview

Page Not Found is a ready-made 404 state for routes and resources that don’t exist. It presents an alert icon, a heading, a description, and — by default — a “Return Home” button, so you can drop it into a catch-all route with no configuration.

Every piece of copy and the action are customisable: override the title and description if needed, and provide an onHomeClick handler to integrate with your router instead of the default full-page navigation to /.

Usage

Import the component:

import { NotFound } from "@eqtylab/equality";

Basic usage — renders with sensible defaults:

<NotFound />

By default the home button navigates to / with a full page load. Pass onHomeClick to hook into client-side routing instead:

import { useNavigate } from "react-router";

const navigate = useNavigate();

<NotFound onHomeClick={() => navigate("/")} />;

Default

Custom Content

Override the title and description, and hide the button with showHomeButton={false} when a return action isn’t appropriate.

<NotFound
  title="We couldn't find that report"
  description="It may have been deleted or the link is out of date."
  showHomeButton={false}
/>

Props