Atlas Header

Implementation
AtlasHeader API

Common Examples

Basic Usage

Default Atlas branding:

import { AtlasHeader } from "@servicetitan/anvil2-ext-atlas";

function DefaultHeader() {
  return <AtlasHeader />;
}

Custom Branding

Use custom icon and assistant name:

import { AtlasHeader } from "@servicetitan/anvil2-ext-atlas";
import CustomLogo from "./custom-logo.svg";

function CustomHeader() {
  return (
    <AtlasHeader
      svgIcon={CustomLogo}
      assistant="Custom Assistant"
    />
  );
}

With Custom Styling

Apply custom CSS class:

import { AtlasHeader } from "@servicetitan/anvil2-ext-atlas";

function StyledHeader() {
  return (
    <AtlasHeader
      assistant="Atlas"
      className="custom-header-class"
    />
  );
}

<AtlasHeader
  svgIcon={CustomIcon}
  assistant="Atlas"
  className="custom-class"
/>

`AtlasHeader` Props

assistant

string

default:"Atlas"

Custom assistant name to display.

className

string

Additional CSS class name for custom styling.

svgIcon

Svg

Custom icon to display instead of the Atlas logo.

Atlas

Documentation Index

​Common Examples

​Basic Usage

​Custom Branding

​With Custom Styling

​AtlasHeader Props

Common Examples

Basic Usage

Custom Branding

With Custom Styling

`AtlasHeader` Props