Skip to content
Nexus Application Design nadesign

ContentToolbar

<ContentToolbar> is the bar above a list / table / grid — left slot for filters and search, right slot for the primary action. Used on every list-page archetype.

import from "@na/ui/components/ContentToolbar" ▶ Open in Storybook packages/ui/src/components/ContentToolbar.tsx

When to use

  • Above any list / table / board where the user can filter, search, or trigger a single primary action (“Upload”, “New”).
  • Sit between ListPageBar (page header) and the data.

Don’t use ContentToolbar for: detail-page actions (DetailPageBar), in-row actions (use Buttons inside the row), or section-level actions (use ContentSection actions).

Default

 
<ContentToolbar
  actions={<Button size="sm">Upload</Button>}
>
  <FilterChips chips={…} onAddFilter={…} />
</ContentToolbar>

API

Prop Type Default Description
children ReactNode — Left slot — typically <FilterChips> or <Input type="search">.
actions ReactNode — Right slot — typically a single primary <Button> ("Upload", "New").
className string — Forwarded.

Design guidelines

✓ Do

  • Keep one primary action on the right. More belongs in a DropdownMenu next to the primary.
  • Render FilterChips on the left as the first thing the user reaches for.
  • Place ContentToolbar directly above the list / table / grid — no other primitive between them.

✗ Don't

  • Stack two ContentToolbars. Use one — combine filter + sort inside it.
  • Put navigation in ContentToolbar. Use the sidebar / DetailPageBar for that.

Accessibility

  • Plain semantic structure. The contents (FilterChips, Input, Button) carry their own roles.

▶ Open ContentToolbar stories in Storybook