ListHeaderItem

A section label for organizing groups within a list. Headers use the same unframed treatment as the rest of the list.

Props

Prop	Type	Default	Description
headline	string	Required	Header text
body	string	-	Optional secondary text
highlight	boolean	false	Use the accent text color
addOn	ReactNode	-	Icon or element to display
addOnPosition	Position	-	Position of the add-on

Basic usage

Section A
Item 1
Description
Item 2
Description
Section B
Item 3
Description
Item 4
Description

<List ariaLabel="Example sections">
  <ListHeaderItem headline="Section A" />
  <ListItem headline="Item 1" body="Description" />
  <ListItem headline="Item 2" body="Description" />

  <ListHeaderItem headline="Section B" />
  <ListItem headline="Item 3" body="Description" />
</List>

Highlighted headers

Use highlight to draw attention with the accent text color. The header remains unframed and does not add a background.

Documents
Project brief
Updated today
Needs attention
Overdue review
Due yesterday

<ListHeaderItem
  headline="Documents"
  addOn={<Icon icon="folder" size="medium" color="primary" />}
/>

<ListHeaderItem
  highlight
  headline="Needs attention"
  addOn={<Icon icon="circle-alert" size="medium" color="highlight" />}
/>

Common patterns

Grouped settings

<List ariaLabel="Settings">
  <ListHeaderItem headline="Account" />
  <ListButtonItem headline="Profile" onClick={() => {}} />
  <ListButtonItem headline="Password" onClick={() => {}} />

  <ListHeaderItem headline="Preferences" />
  <ListButtonItem headline="Theme" onClick={() => {}} />
  <ListButtonItem headline="Language" onClick={() => {}} />

  <ListHeaderItem headline="Danger zone" highlight />
  <ListButtonItem
    headline="Delete account"
    color="negative"
    onClick={() => {}}
  />
</List>

Alphabetical grouping

<List ariaLabel="Contacts">
  <ListHeaderItem headline="A" />
  <ListItem headline="Alice Anderson" />
  <ListItem headline="Andrew Adams" />

  <ListHeaderItem headline="B" />
  <ListItem headline="Bob Brown" />
  <ListItem headline="Betty Baker" />
</List>