Block Header

Install

pnpm exec vegastack-design verify block-header

pnpm dlx shadcn@4.21.0 add @vegastack/block-header

Usage

import {
  BlockHeader,
  BlockHeaderButton,
  BlockHeaderOpen,
} from "@/components/ui/block-header";

<DataGrid
  embedded
  toolbar={
    <BlockHeader
      icon={<Table2 />}
      title={table.name}
      menu={<DropdownMenuItem onClick={remove}>Remove block</DropdownMenuItem>}
      open={<BlockHeaderOpen render={<Link href={table.href} />} />}
    >
      <ViewMenu trigger={<BlockHeaderButton />} />
      <FilterPopover trigger={<BlockHeaderButton />} />
    </BlockHeader>
  }
  {...grid}
/>;

The one header row of a live block inside a page — a table view, a task list, any block that shows records from somewhere else. Left to right: the block's kind as an icon, what it shows, its controls (BlockHeaderButtons that open the host's View and Filter popovers), the ⋯ menu and ↗ Open, a link to the source's own page. A block with no source yet passes picker instead: it sits where the title will be ("Pick a table…"), so a block inserts at once and is set up where it sits rather than in a dialog first.

Scope

• Owns: the row's layout, the ⋯ menu trigger, the Open link's look, the empty state's place for a picker, wrapping on a narrow block.
• Does not own: the source picker, the View and Filter popovers, or what they change — those are the host's. Nor the block's frame: DataGrid embedded rules the header off as its top, a task list block puts it over its rows.
• Compose with: DataGrid embedded as its toolbar; a DropdownMenuTrigger or PopoverTrigger with render={<BlockHeaderButton />}.

Anatomy

Examples

Table block

The title truncates; the controls follow it, and the ⋯ menu and Open sit at the end.

Before a source is picked

picker replaces the title and the controls. Pick a table in the preview: the header becomes the ready row; Change table in ⋯ brings the picker back.

Task list block, and a narrow column

The same header serves a task list. In a narrow block the controls wrap under the title and, under 20rem, Open shows its icon alone (its label stays the link's name).

API Reference

BlockHeader

BlockHeaderButton

BlockHeaderButton takes Button's props: a small quiet ghost button in the muted ink.

BlockHeaderOpen

Accessibility

• The icon is decorative; the title is plain text — name the block's content (the grid's aria-label, the task list's label) for assistive technology.
• The ⋯ trigger is named by menuLabel ("Block actions").
• Open is a real link, so it opens in a new tab with a modified click; on a narrow block its label is visually hidden but still names it.
• The picker is the host's control and carries its own name.

Do / Don't