AppBar

AppBar is the top header bar of an app or page. It renders a <header> and forwards native attributes, so you compose its contents freely — typically an AppBarTitle plus one or more AppBarSections for actions. position switches between static, sticky, and fixed, and tone picks the base, subtle, or accent color scheme.

Example

import { AppBar, AppBarTitle, AppBarSection, IconButton } from '@officina/ui';
import { Bell, Settings } from 'lucide-react';

<AppBar position="sticky">
  <AppBarTitle>Officina</AppBarTitle>
  <AppBarSection>
    <IconButton icon={<Bell />} aria-label="Notifications" variant="ghost" />
    <IconButton icon={<Settings />} aria-label="Settings" variant="ghost" />
  </AppBarSection>
</AppBar>;

API

AppBar

The <header> bar itself.

AppBarTitle

The flexible, truncating title region that absorbs leftover width.

AppBarTitle is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

AppBarSection

A non-shrinking, evenly spaced cluster of controls.

AppBarSection is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.