Build / Organisms

AppBar

organism
play-fn

The persistent application header.

Per the app shell: the mark sits at the left, and account access ("Me") at the right. Pair with BottomNav for the full PWA shell.

import { AppBar } from '@meetcard/deck'

Example

<AppBar brand={<Logo />} actions={<IconButton label="Me" icon={<Avatar …/>} />} />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

The mark at the left, account access at the right.

Default

Source

const Default = () => <AppBar
    brand={<Mark style={{ height: 24, width: 24 }} />}
    actions={(<IconButton
      label="Me"
      variant="ghost"
      icon={<Avatar name="Ada Lovelace" size="xs" decorative />}
    />)} />;

With a page title, for a screen whose name is not already the biggest thing on it.

With Title

Source

const WithTitle = () => <AppBar
    brand={<Mark style={{ height: 24, width: 24 }} />}
    actions={(<IconButton
      label="Me"
      variant="ghost"
      icon={<Avatar name="Ada Lovelace" size="xs" decorative />}
    />)}
    title="Connections" />;

Company is reached through "Me" rather than the bottom bar — it is conditional, so it is not a peer of the primary destinations.

Title Only

Source

const TitleOnly = () => <AppBar
    brand={undefined}
    actions={(<IconButton
      label="Me"
      variant="ghost"
      icon={<Avatar name="Ada Lovelace" size="xs" decorative />}
    />)}
    title="Settings" />;

Props

Prop	Type	Default	Description
`actions`	`ReactNode`	—	Right-hand slot — the "Me" account entry point.
`brand`	`ReactNode`	—	Brand mark, at the left. Usually the MeetCard app mark.
`sticky`	`boolean`	`true`	Keeps the bar pinned while content scrolls beneath it.
`title`	`ReactNode`	—	Page title, shown when a mark alone is not enough context.

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.