AppTopBar

Use AppTopBar

Application context and global actions in two independent, wrapping slots.

"use client";

import { FloodRoot, AppTopBar, Text, Button } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <AppTopBar start={<Text>Workspace</Text>} end={<Button size="sm">Search</Button>} />
    </FloodRoot>
  );
}

Design notes

• Use in AppShell or in a host-owned layout. Use PageHeader for the current page's title and actions.
• The start and end groups wrap on narrow hosts without changing keyboard order. Use bordered only where the toolbar needs a visible boundary.

API reference