Error Pages

Standard enterprise error pages — 404 Not Found and 500 Server Error. Both include a brief message and a clear route back to safety.

When to use this recipe

Use these for application-level routing errors, API failure states at the page level, and permission-denied screens. Drop into your router's error boundary or fallback route.

Components used

Button · Card

Preview · Error Pages

Code

HTML · @primus/ui-core

<!-- 404 -->
<div style="text-align:center;padding:5rem 2rem">
  <div style="font-size:5rem;font-weight:800;color:var(--muted-foreground);line-height:1;margin-bottom:1rem">404</div>
  <h2>Page not found</h2>
  <p style="color:var(--muted-foreground);max-width:320px;margin-inline:auto">
    The page you are looking for does not exist or has been moved.
  </p>
  <div class="hstack" style="justify-content:center;gap:0.75rem;margin-top:1.75rem">
    <button class="outline" onclick="history.back()">Go back</button>
    <a href="/dashboard"><button>Go to dashboard</button></a>
  </div>
</div>

<!-- 500 -->
<div style="text-align:center;padding:5rem 2rem">
  <div style="font-size:5rem;font-weight:800;color:var(--danger);line-height:1;margin-bottom:1rem">500</div>
  <h2>Something went wrong</h2>
  <p style="color:var(--muted-foreground);max-width:320px;margin-inline:auto">
    An unexpected error occurred. Our team has been notified.
  </p>
  <div class="hstack" style="justify-content:center;gap:0.75rem;margin-top:1.75rem">
    <button class="outline" onclick="location.reload()">Try again</button>
    <a href="/dashboard"><button>Go to dashboard</button></a>
  </div>
</div>

React

import { PrimusButton } from 'primus-react-ui';
import { useNavigate } from 'react-router-dom';

export function NotFoundPage() {
  const navigate = useNavigate();
  return (
    <div style={{ textAlign: 'center', padding: '5rem 2rem' }}>
      <div style={{ fontSize: '5rem', fontWeight: 800,
        color: 'var(--muted-foreground)', lineHeight: 1, marginBottom: '1rem' }}>
        404
      </div>
      <h2>Page not found</h2>
      <p style={{ color: 'var(--muted-foreground)', maxWidth: 320, margin: '0 auto 1.75rem' }}>
        The page you are looking for does not exist.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
        <PrimusButton variant="outline" onClick={() => navigate(-1)}>Go back</PrimusButton>
        <PrimusButton onClick={() => navigate('/dashboard')}>Go to dashboard</PrimusButton>
      </div>
    </div>
  );
}

export function ErrorPage({ onRetry }: { onRetry?: () => void }) {
  const navigate = useNavigate();
  return (
    <div style={{ textAlign: 'center', padding: '5rem 2rem' }}>
      <div style={{ fontSize: '5rem', fontWeight: 800,
        color: 'var(--danger)', lineHeight: 1, marginBottom: '1rem' }}>
        500
      </div>
      <h2>Something went wrong</h2>
      <p style={{ color: 'var(--muted-foreground)', maxWidth: 320, margin: '0 auto 1.75rem' }}>
        An unexpected error occurred. Our team has been notified.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
        {onRetry && <PrimusButton variant="outline" onClick={onRetry}>Try again</PrimusButton>}
        <PrimusButton onClick={() => navigate('/dashboard')}>Go to dashboard</PrimusButton>
      </div>
    </div>
  );
}

Angular

// not-found.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-not-found',
  templateUrl: './not-found.component.html',
})
export class NotFoundComponent {
  constructor(private router: Router, private location: Location) {}
  goBack()      { this.location.back(); }
  goDashboard() { this.router.navigate(['/dashboard']); }
}

<!-- not-found.component.html -->
<div style="text-align:center;padding:5rem 2rem">
  <div style="font-size:5rem;font-weight:800;color:var(--muted-foreground);line-height:1;margin-bottom:1rem">
    404
  </div>
  <h2>Page not found</h2>
  <p style="color:var(--muted-foreground);max-width:320px;margin:0 auto 1.75rem">
    The page you are looking for does not exist.
  </p>
  <div class="hstack" style="justify-content:center;gap:0.75rem">
    <primus-button variant="outline" (clicked)="goBack()">Go back</primus-button>
    <primus-button (clicked)="goDashboard()">Go to dashboard</primus-button>
  </div>
</div>