App Header – Code

Implementation
AppHeader Props
AppHeaderAction

Common Examples

To use the AppHeader, pass a title and configured icon-button actions. It works standalone or in the header slot of AppShell.

import { AppHeader } from "@servicetitan/anvil2-ai-kit";
import { IconMenu, IconX } from "@servicetitan/anvil2-icons";

function ExampleComponent() {
  return (
    <AppHeader
      title="Conversation"
      leadingActions={[
        { id: "menu", icon: <IconMenu />, label: "Open navigation" },
      ]}
      trailingActions={[
        { id: "close", icon: <IconX />, label: "Close" },
      ]}
    />
  );
}

Actions

Each action renders as a ghost, icon-only Button. Its required label becomes the accessible name and tooltip.Set disabled to prevent an action.

Title

The title renders as the view’s h1. It fills the space between action clusters and truncates with an ellipsis before colliding with them.On a standalone, full-shell, or fullscreen window surface, the title is centered between the clusters. A docked Window start-aligns it automatically through app-surface context.

Window drag handle

Pass dragHandleProps from useAppSurface() to an action that moves a docked Window. The props are inert outside a docked window.

const { dragHandleProps } = useAppSurface();

<AppHeader
  leadingActions={[
    { icon: <IconGrip />, label: "Move window", dragHandleProps },
  ]}
/>;

Internationalization

AppHeader has no component-owned strings. Localize the title and each action label before passing them to the component.

React Accessibility

The title is the primary h1 for the framed view.
Every action requires a label used for its aria-label and tooltip.
Action buttons support pointer, touch, Enter, and Space through React Aria.

<AppHeader
  title="Conversation"
  leadingActions={leadingActions}
  trailingActions={trailingActions}
/>

`AppHeader` Props

The AppHeader accepts the following props and forwards remaining <header> attributes except children, native title, and style.

AppHeaderAction[]

Icon-button actions at the inline start.

string

Primary view title. Omit for an action-only header.

AppHeaderAction[]

Icon-button actions at the inline end.

const action: AppHeaderAction = {
  id: "close",
  icon: <IconX />,
  label: "Close",
  onPress: close,
};

`AppHeaderAction`

IconElement

required

Icon shown in the action button.

string

required

Accessible name and tooltip content.

boolean

default:"false"

Disables the action.

WindowDragHandleProps

Pointer and keyboard handlers that turn the action into a docked-window drag handle.

string

Stable React key. Defaults to label.

() => void

Handles action activation.

AI Kit

Agent Experience

App Header – Code

Common Examples

Actions

Title

Window drag handle

Internationalization

React Accessibility

`AppHeader` Props

`AppHeaderAction`

​Common Examples

​Actions

​Title

​Window drag handle

​Internationalization

​React Accessibility

​AppHeader Props

​AppHeaderAction

Common Examples

Actions

Title

Window drag handle

Internationalization

React Accessibility

`AppHeader` Props

`AppHeaderAction`