Options
AppHeader supports an optional centered title and two independent action clusters.Title
title renders centered between the two action clusters with <h1> semantics — it’s the primary heading of the view the shell frames. Omit it for an action-only header; the flexible middle still reserves the centered space, whether or not a title fills it.
Actions
leadingActions render at the start (left in LTR) and trailingActions at the end. Reserve leadingActions for entry points into the surrounding layout — panel toggles, navigation — and trailingActions for surface-level controls, like minimize and close. Keep each action in the cluster it conventionally belongs to; don’t relocate a panel toggle to the trailing side or a window control to the leading side. Consumers rely on this placement staying consistent across every Carto surface, so avoid rearranging it in your implementation.
Behavior
The header adapts its title to available space and can present any action as disabled.Title Truncation
The title is single-line and truncates with an ellipsis rather than wrapping or pushing the action clusters. Its center shifts toward the side with fewer actions, since it fills the flexible space between both clusters.Disabled Actions
Setdisabled on an individual action to dim it and block interaction while keeping it in place — useful when a panel toggle has nothing to reveal yet.
Usage Guidelines
When to Use
Use the App Header when:- View identity – The experience needs a title bar that names the current view as its primary heading.
- Shell-level actions – The experience needs panel toggles, navigation, or surface controls such as minimize and close.
- Shell headers – An App Shell or Window needs content for its header region. The App Header also works on its own.
When not to use
Avoid using the App Header for:- Headings inside content – The App Header title is the primary heading of the view. Use a headline Text for headings within chat or panel content.
- Actions with visible text labels – Every App Header action is an icon-only button whose label appears as a tooltip.
Keyboard Interaction
Users can navigate and activate header actions using standard keyboard controls.Patterns that use this component
- Agentic Experience Shell — Identifies the experience and provides shell-level actions