App Bar

AppBar is a compound component for creating action bars anchored to any edge. It builds on Card for visual styling and provides structured slots for content organization.

Use AppBar inside dialogs, popovers, panels, or any container where you need persistent controls.

Installation

npm install @kushagradhawan/kookie-ui

Usage

import { Card, Flex, AppBar, IconButton } from '@kushagradhawan/kookie-ui';
 
export function MyAppBar() {
  return (
    <Card variant="classic" size="2">
      <AppBar variant="soft" size="1">
        <AppBar.Left>
          <IconButton variant="ghost" size="2" color="gray">
            <ArrowLeftIcon />
          </IconButton>
        </AppBar.Left>
        <AppBar.Center>
          <AppBar.Title>Settings</AppBar.Title>
        </AppBar.Center>
        <AppBar.Right>
          <IconButton variant="ghost" size="2" color="gray">
            <CloseIcon />
          </IconButton>
        </AppBar.Right>
      </AppBar>
      <Flex p="4" pt="var(--rt-app-bar-height)">
        {/* Content */}
      </Flex>
    </Card>
  );
}

AppBar uses absolute positioning to span edge-to-edge. Use --rt-app-bar-height (or --rt-app-bar-width for vertical app bars) to add padding to your content.

Anatomy

AppBar is a compound component with the following parts:

<AppBar>
  <AppBar.Left>{/* Start section content */}</AppBar.Left>
  <AppBar.Center>
    <AppBar.Title>{/* Title text */}</AppBar.Title>
  </AppBar.Center>
  <AppBar.Right>{/* End section content */}</AppBar.Right>
</AppBar>

Props

Root Props

The root component manages positioning and inherits Card's visual styling.

Section Props

AppBar.Left, AppBar.Center, and AppBar.Right extend Flex and accept all Flex props. They are placed on a CSS grid for true centering regardless of content width.

Plus all other Flex props (direction, wrap, p, m, etc.).

Title Props

AppBar.Title renders a truncated heading and accepts all Heading props with app bar-appropriate defaults.

Anchor

Use the anchor prop to position the app bar at different edges.

Top

The default. Anchors to the top of the scroll container.

<AppBar anchor="top">
  <AppBar.Center>
    <AppBar.Title>Top AppBar</AppBar.Title>
  </AppBar.Center>
</AppBar>

Bottom

Anchors to the bottom, useful for action bars.

<AppBar anchor="bottom">
  <AppBar.Right>
    <Button>Save</Button>
  </AppBar.Right>
</AppBar>

Left / Right

Vertical app bars for sidebar-style controls.

<AppBar anchor="left">
  <AppBar.Left>
    <IconButton variant="ghost" size="2">
      <HomeIcon />
    </IconButton>
  </AppBar.Left>
</AppBar>

Positioning Modes

AppBar has two positioning modes: inset (default) and floating. Both use position: absolute.

Inset (Default)

By default, AppBar uses inset mode to go edge-to-edge inside Cards.

<Card size="2">
  <AppBar variant="soft">
    <AppBar.Title>Edge-to-edge</AppBar.Title>
  </AppBar>
  <Flex p="4" pt="var(--rt-app-bar-height)">{/* Content */}</Flex>
</Card>

When inset (default):

• No border radius
• Edge-to-edge layout
• Only the exposed edge shows a border

Floating

Use floating for a detached look with margin from edges.

<AppBar floating variant="surface">
  <AppBar.Center>
    <AppBar.Title>Floating AppBar</AppBar.Title>
  </AppBar.Center>
</AppBar>

When floating:

• Full border radius from Card
• Margin from container edges (controlled by offset)
• Complete Card styling (all borders visible)

Offset

Control the margin when floating with the offset prop.

<AppBar floating offset="4" variant="surface">
  <AppBar.Title>More spacing</AppBar.Title>
</AppBar>

Variants

AppBar inherits all Card variants. The default is ghost for minimal visual weight.

Soft

Muted background, great for dialog headers.

<AppBar variant="soft">
  <AppBar.Title>Soft</AppBar.Title>
</AppBar>

Surface

Subtle background with border. Good for floating app bars.

<AppBar variant="surface" floating>
  <AppBar.Title>Surface</AppBar.Title>
</AppBar>

Ghost

No visible background or border. Use when the parent provides visual context.

<AppBar variant="ghost">
  <AppBar.Title>Ghost</AppBar.Title>
</AppBar>

Sizes

Controls padding inside the app bar.

<AppBar size="1">{/* Compact */}</AppBar>
<AppBar size="2">{/* Default */}</AppBar>
<AppBar size="3">{/* Comfortable */}</AppBar>

Material

Use material="translucent" for backdrop blur over images or dynamic backgrounds.

<AppBar material="translucent" variant="soft">
  <AppBar.Title>Translucent</AppBar.Title>
</AppBar>

CSS Variables

AppBar exposes dimension variables so you can add padding to prevent content overlap:

• --rt-app-bar-height for horizontal app bars (anchor="top" or anchor="bottom")
• --rt-app-bar-width for vertical app bars (anchor="left" or anchor="right")

The variables are set on the AppBar's parent element, so the AppBar and content must share a common container:

<Card size="2">
  <AppBar anchor="top">
    <AppBar.Title>Top AppBar</AppBar.Title>
  </AppBar>
  <Flex p="4" pt="var(--rt-app-bar-height)">
    {/* Content */}
  </Flex>
</Card>

For bottom-anchored app bars, use pb="var(--rt-app-bar-height)" on your content instead.

For image or video backgrounds where content should flow behind the app bar, simply don't apply the padding.

Accessibility

• Use semantic elements and ARIA attributes as needed
• For dialog/popover context, pair with appropriate aria-labelledby on the container
• AppBar.Title can provide the ID for accessible labeling

<Dialog.Content aria-labelledby="app bar-title">
  <AppBar>
    <AppBar.Title id="app bar-title">Settings</AppBar.Title>
  </AppBar>
</Dialog.Content>