Skip to main content

Common Examples

Basic Usage

Display a system error state:
import { SystemError } from "@servicetitan/ext-atlas";

function ErrorScreen() {
  return (
    <SystemError
      title="Unable to Load Chat"
      description="We're having trouble connecting to the server. Please check your connection and try again."
    />
  );
}

Custom Error Icon

Use a custom icon for the error state:
import { SystemError } from "@servicetitan/ext-atlas";
import CloudOffIcon from "@servicetitan/anvil2/assets/icons/material/round/cloud_off.svg";

function OfflineError() {
  return (
    <SystemError
      title="You're Offline"
      description="Atlas requires an internet connection to work."
      icon={CloudOffIcon}
      iconColor="var(--color-warning-100)"
    />
  );
}

Conditional Error Display

Show error based on application state:
import { SystemError, ChatWindow, Content } from "@servicetitan/ext-atlas";

function AtlasApp() {
  const [error, setError] = useState<string | null>(null);

  if (error) {
    return (
      <SystemError
        title="Something went wrong"
        description={error}
      />
    );
  }

  return (
    <ChatWindow open>
      <Content>{/* messages */}</Content>
    </ChatWindow>
  );
}

Default Values

Using default title and description:
import { SystemError } from "@servicetitan/ext-atlas";

function DefaultErrorScreen() {
  // Uses default title "Something went wrong" and default description
  return <SystemError />;
}
Last modified on February 12, 2026