Error Page

A clean and helpful layout for handling 404 Not Found errors or access denials, providing clear navigation back to safety.

Demo

Implementation

<script setup lang="ts">
// 1. Component Imports (Default)
import CLHeading from '@codeandfunction/callaloo/CLHeading';
import CLText from '@codeandfunction/callaloo/CLText';
import CLButton from '@codeandfunction/callaloo/CLButton';
import CLIcon from '@codeandfunction/callaloo/CLIcon';

import { useToast } from '@codeandfunction/callaloo/composables/useToast';

// 2. Enum & Type Imports (Named)
import { 
  CLColors, 
  CLIconNames,
  CLIconSizes,
  CLHeadingLevels,
  CLHeadingTypes,
  CLTextTypes,
  CLAlign,
  CLButtonTypes,
  CLColorVariants
} from '@codeandfunction/callaloo';

// 3. State & Logic
const toast = useToast();

const handleContactSupport = (): void => {
  toast.showToast({
    color: CLColors.Neutral,
    message: 'Opening support options...',
    title: 'Contact Support',
  });
};

const goHome = (): void => {
  toast.showToast({
    color: CLColors.Primary,
    message: 'Returning to dashboard...',
    title: 'Navigating',
  });
};
</script>

<template>
  <div class="pattern-preview">
    <div class="error-page-container">
      <div class="error-code">404</div>
      <div class="error-content">
        <div class="error-main">
          <CLIcon :name="CLIconNames.AlertTriangle" :size="CLIconSizes.XXXL" :color="CLColors.Danger" />
          <CLHeading :level="CLHeadingLevels.H1" :type="CLHeadingTypes.Display">Page Not Found</CLHeading>
          <CLText :type="CLTextTypes.Body" :color="CLColors.Neutral" :align="CLAlign.Center">
            Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
          </CLText>
        </div>
        <div class="actions">
          <CLButton 
            :variant="CLColorVariants.Ghost" 
            :color="CLColors.Neutral"
            :type="CLButtonTypes.Button"
            @click="handleContactSupport"
          >
            Contact Support
          </CLButton>
          <CLButton 
            :color="CLColors.Primary" 
            :icon-before="CLIconNames.ArrowLeft"
            :type="CLButtonTypes.Button"
            @click="goHome"
          >
            Back to Dashboard
          </CLButton>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .error-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem 2rem;
    min-height: 400px;
  }
  .error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 500px;
    gap: 2rem;
  }
  .error-code {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: var(--vp-c-brand-1);
    opacity: 0.15;
    position: absolute;
    z-index: 0;
    user-select: none;
  }
  .error-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .actions {
    display: flex;
    gap: 1rem;
  }
</style>