layout · Normal DOM + Twenty Remote DOM

GroupHeader

XXS uppercase header for groups WITHIN a section. The hierarchy level below PanelHeader.

Used when a section contains several visually-distinct groups (Quotes, Invoices, Contracts, Proposals in DocumentHub). Differs from PanelHeader in size and weight: XXS, semibold, tertiary, uppercase, letterspaced — clearly subordinate.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { GroupHeader } from '@8maverik8/twenty-design';

Examples

Title only

Invoices

tsx
<GroupHeader title="Invoices" />

With count

Quotes3

tsx
<GroupHeader title="Quotes" count={3} />

With count and actions

Contracts1

tsx
<GroupHeader
  title="Contracts"
  count={1}
  actions={<Button size="sm" variant="tertiary" startIcon={<IconPlus size={12} />}>Add</Button>}
/>

Stacked groups

How DocumentHub renders type-grouped documents — each GroupHeader followed by its rows.

Quotes1

Invoices2

Contracts1

Proposals1

tsx
<Stack gap="2">
  <GroupHeader title="Quotes" count={1} />
  …rows…
</Stack>
<Stack gap="2">
  <GroupHeader title="Invoices" count={2} />
  …rows…
</Stack>

Guidelines

✓

Pair with a `count` when the group represents a filterable subset.Tag-style count adornments make collection sizes scannable.

Use as the primary panel title — that role belongs to PanelHeader.GroupHeader is intentionally quiet (tertiary color) — too quiet to anchor a whole panel.