# ListMapToggle

> A two-button segmented switch between a List view and a Map view.

## Facts

- **Product**: Max
- **Family**: Navigation
- **Global**: `window.DigitalCrew.ListMapToggle`
- **Source**: `max-agent: src/components/shared/list-map-toggle.tsx`
- **Import in the app**: `import { ListMapToggle } from "@/components/shared/list-map-toggle";`
- **Live preview**: /design/components/list-map-toggle/preview.html
- **Page**: /design/components/list-map-toggle

## Guidelines

**Use it for** record pages that can be shown as a table or on the [`WorldGlobe`](/design/components/world-globe.md): Saved › People and Saved › Organizations. It sits first in the page's header actions, before Share, Import CSV and Add.

**What you provide**: `view: "list" | "map"` and `onChange(next)`. In Max the state comes from `useListMapView()`, in the same file. That hook stores the choice in the `view` URL parameter, so a shared link opens on the same side. Only `map` is written; `list` is the default and leaves the URL clean. The hook calls `router.replace` without scrolling, and it is not exported on `window.DigitalCrew`.

**Anatomy**:
- The track is `bg-muted inline-flex items-center rounded-md p-0.5`.
- Two small [`Button`](/design/components/button.md)s, `h-8 gap-1.5`, with 16px `List` and `Map` icons.
- The selected button uses the outline variant with `bg-background shadow-sm`. The other is ghost with `border-transparent`.
- Each button sets `aria-pressed`.

**Don't** use it for more than two views; use [`Tabs`](/design/components/tabs.md) or [`ToggleGroup`](/design/components/toggle-group.md) instead. Don't keep the view only in component state on a shareable page: the URL parameter is what lets a link open on the map.

## API

```ts
export type ListMapView = "list" | "map";
export declare function useListMapView(): {
    view: ListMapView;
    setView: any;
};
export declare function ListMapToggle({ view, onChange, }: {
    view: ListMapView;
    onChange: (next: ListMapView) => void;
}): JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    var s = React.useState("list"), view = s[0], setView = s[1];
    return h("div", { className: "space-y-3" },
      h("div", { className: "flex flex-wrap items-end justify-between gap-2" },
        h("div", { className: "space-y-1" },
          h("h1", { className: "text-2xl font-bold tracking-tight" }, "People"),
          h("p", { className: "text-sm text-muted-foreground" }, "Everyone in your workspace's knowledge base.")),
        h("div", { className: "flex flex-wrap items-center gap-2" },
          h(DC.ListMapToggle, { view: view, onChange: setView }),
          h(DC.Button, null, h(I.Plus, { className: "h-4 w-4" }), "Add person"))),
      h("p", { className: "text-xs text-muted-foreground" }, view === "map" ? "Showing 21 people on the map." : "Showing 21 people in the table."));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Navigation

- [Breadcrumb](/design/components/breadcrumb.md): A page trail that shows where the current page sits in the hierarchy, built from composable parts inside a `<nav aria-label="breadcrumb">`.
- [Header](/design/components/header.md): The app's top bar: a sidebar toggle and a divider, followed by whatever you pass in.
- [Pagination](/design/components/pagination.md): Numbered page links with previous/next and an ellipsis.
- [Sidebar](/design/components/sidebar.md): The app shell: a collapsible left sidebar beside an inset content panel (`SidebarProvider` › `Sidebar` + `SidebarInset`).
- [Tabs](/design/components/tabs.md): A segmented list that switches panels in place: a 36px `muted` track with 3px padding; the active tab lifts onto `background`.
- [ThemeSwitcher](/design/components/theme-switcher.md): A round icon button with a Light, Dark and System menu that sets the next-themes theme.