App Header

Width Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<header class="aparte-app-header">
  <button class="aparte-btn aparte-btn--icon aparte-app-header__toggle" type="button" aria-label="Toggle the sidebar" data-aparte-sidebar-toggle><aparte-icon name="menu"></aparte-icon></button>
  <span class="aparte-app-header__title">Deploy checklist</span>
  <div class="aparte-app-header__actions">
    <span class="aparte-tag">gpt-4.1</span>
    <button class="aparte-btn aparte-btn--sm aparte-btn--ghost" type="button">Share</button>
  </div>
</header>

The bar above the chat.

A recipe and nothing more, because a header has no behaviour of its own: a toggle for the sidebar (which <aparte-sidebar> wires from the data-aparte-sidebar-toggle attribute), the conversation’s title, and an actions zone pushed to the end — a model selector, a share button, whatever the page needs. The toggle shows only under 48rem, where the sidebar is a drawer; above it the column is simply there.

Classes

.aparte-app-header · .aparte-app-header__actions · .aparte-app-header__title · .aparte-app-header__toggle

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.