<!-- Generated by emit-docs.ts — do not edit. -->
# NavBar


## Props

| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| `brand` | `ReactNode` | — | no | Brand slot (wordmark / logo link), leading edge. |
| `actions` | `ReactNode` | — | no | Trailing actions slot (theme switch, CTA). |
| `children` | `ReactNode` | — | no | Nav links. |
| `ref` | `Ref<HTMLElement>` | — | no | Forwarded ref to the header element. |
| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |

## Theming

Override `--ds-navbar-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).


## Rules

- One accent per visual group; everything else neutral or ghost.
- danger only for actions with real consequences.
- Sizes are px numbers (24|32|40|48), never S/M/L.
- Typography tokens are --ds-text-{size}-{lineHeight}-{weight}.
- Override component tokens (--ds-{component}-*), not semantic tokens, for one-off theming.
- --ds-button-font overrides button typography across all sizes (documented D34 override; ember → mono).