# AppTopBar

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

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `start` | `ReactNode` | `—` |
| `end` | `ReactNode` | `—` |
| `bordered` | `boolean` | `false` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLElement>, "children">` | `Forwarded` |