NoticeScreen and ErrorScreen
A screen that carries one message - a refusal, a page that does not exist, or an error with its reference.
Notice fills the viewport with one centred card: an icon, a title, a line of explanation,
the ways forward and a footer line. Use it for a page the reader cannot see: no access, not
found, maintenance. Error is the same card for an error that hit a whole page, with the
icon in the destructive tone and the error's reference as its footer.
No access
You need the administrator role to open this page.
// apps/docs/examples/ui/notice-screen.tsx'use client';
import {useState} from 'react';import {LockIcon} from 'lucide-react';
import {ErrorScreen} from '@workspace/active-ui/components/composed/error-screen';import {NoticeScreen} from '@workspace/active-ui/components/composed/notice-screen';import {Button} from '@workspace/active-ui/components/primitives/button';import { ToggleGroup, ToggleGroupItem,} from '@workspace/active-ui/components/primitives/toggle-group';
/** * Two screens that each carry one message: a refusal on the neutral notice * screen, and an error on the error screen with its reference. Both fill the * viewport in an application; here `className` bounds them to the frame. * The buttons do nothing. */export default function NoticeScreenExample() { const [screen, setScreen] = useState('notice'); return ( <div className="grid w-full gap-4"> <ToggleGroup aria-label="Screen" variant="outline" value={[screen]} onValueChange={(next) => next[0] && setScreen(next[0])} > <ToggleGroupItem value="notice">NoticeScreen</ToggleGroupItem> <ToggleGroupItem value="error">ErrorScreen</ToggleGroupItem> </ToggleGroup> <div className="overflow-hidden rounded-md border"> {screen === 'notice' ? ( <NoticeScreen className="min-h-0 py-10" icon={<LockIcon />} title="No access" description="You need the administrator role to open this page." actions={<Button className="w-full">Back to the overview</Button>} /> ) : ( <ErrorScreen className="min-h-0 py-10" title="Something went wrong" description="The page could not be loaded. Try again in a moment." actions={ <> <Button className="w-full">Try again</Button> <Button variant="outline" className="w-full"> Back to the overview </Button> </> } referenceLabel="Reference:" reference="ERR-a1b2c3d4" /> )} </div> </div> );}What the composition adds#
One stable card without an entrance animation.
The icon is decoration: the screen hides it from assistive technology and sizes and colours it;
toneisneutralordestructive.Slots, not rules:
actionstakes your buttons or links, stacked;footertakes a line such as a reference.Errorfills the footer fromScreen referenceandreference.Label
The screens catch nothing, log nothing and know no status code: which screen appears, its text and what the actions do are yours. For an error in one area of a page, use an Alert or an ErrorBoundary around that area.
Usage#
import {ErrorScreen} from '@workspace/active-ui/components/composed/error-screen';
<ErrorScreen title="Something went wrong" description="The page could not be loaded." actions={<Button className="w-full">Try again</Button>} referenceLabel="Reference:" reference={reference}/>;What your application provides#
The title, description and actions, translated; buttons at full width (
class).Name="w- full" The reference of an error: the screen shows it, it does not make one.
The height, when the screen should not fill the viewport (
class, as in the example).Name
Accessibility#
The title is the screen's
<h1>, and the announcement: there is no live region, because the screen arrives with the page.Focus is not moved, so a screen reader starts at the top and reads the title first.
The example shows a second
<h1>on this documentation page; in an application the screen is the page.
API#
NoticeScreen#
NoticeScreen
Props
- Type
ReactNode
The icon in the circle above the heading.
Decorative, and the shell handles that itself: the circle carries aria-, so the icon and everything around it is invisible to a screen reader. The caller therefore passes a bare icon and no aria-, aria- or role of its own. The meaning is in title; a second accessible name would read it out twice.
The shell also sets the size (size-) and the colour (via tone, which the icon inherits as current). An icon that brings its own size- keeps it.
- Type
string
The heading of the screen. Renders as <h1>; there is exactly one.
- Type
ReactNode
The actions, from the caller. Stacked vertically; the buttons themselves are full width because the caller passes them that way.
A slot and not href/on/on props: which way back exists differs per context, and that choice belongs to whoever knows the context. This shell knows no router and must not know one.
- Type
string
The shell is normally min-. This prop is where a caller overrides that height, for example to show the screen in a bounded area (min- in a lab case or a variant preview).
- Type
ReactNode
A line of explanation below the heading. Inline content; omit rather than pass empty.
- Type
NoticeScreen Tone - Default
'neutral'
Which of the two tones the icon surface gets. Defaults to neutral: most notices do not report an outage.
Takes only the props listed.
Types
The two presentation tones that actually exist, measured across the three consumers: an outage is destructive, a denial and a 404 are neutral.
Deliberately no warning, success or info added "for later". A tone nobody sets is a promise nobody has kept, and it would moreover suggest that this component has a semantic axis. If a third real tone appears, that is the moment to add it.
The names follow the colour tokens (--destructive) and not the five tones of Status: this is about an icon surface and an icon, and those carry the base colour, not the text variant.
type NoticeScreenTone = 'neutral' | 'destructive';The props of Notice, each described in its prop list on this page.
interface NoticeScreenProps {
icon: ReactNode;
tone?: NoticeScreenTone;
title: string;
description?: ReactNode;
actions?: ReactNode;
footer?: ReactNode;
className?: string;
}ErrorScreen#
Import from @workspace/
Props
- Type
string
The screen's heading. Renders as <h1>; there is exactly one.
- Type
ReactNode
The recovery actions, from the caller. Stacked vertically at full width.
A slot and not on/on/on props: which way back exists differs per context, and that choice belongs to whoever knows the context.
- Type
string
Classes for the screen.
- Type
string
One line of explanation below the heading.
- Type
string
The full reference text as it should appear on screen, including any prefix (for example ERR-).
The component generates no identity; it shows one.
- Type
string
The label before the reference, for example Reference:.
Takes only the props listed.
Types
The props of Error, each described in its prop list on this page.
interface ErrorScreenProps {
title: string;
description?: string;
actions?: ReactNode;
reference?: string;
referenceLabel?: string;
className?: string;
}