WAfM components

Participant data header

Compose participant context, sidebar access, bookmarking, and sharing in the content header.

Participant data header playground

Inspect long names, bookmark state, disabled actions, and the sidebar callback.

Properties

Participant name

Bookmarked

Disable participant actions

SidebarProvider is supplied by the example. Context and actions are composed children; the header never reads participant data or persists bookmarks.

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

ParticipantDataHeader

import { ParticipantDataHeader, ParticipantDataHeaderContext, ParticipantDataHeaderActions } from '@wafm/ui/components/participant-data-header'
import { BookmarkToggle } from '@wafm/ui/components/bookmark-toggle'

<ParticipantDataHeader>
  <ParticipantDataHeaderContext>{sidebarTrigger}{breadcrumb}</ParticipantDataHeaderContext>
  <ParticipantDataHeaderActions>
    <BookmarkToggle aria-label="Teilnehmende merken" pressed={bookmarked} onPressedChange={setBookmarked} />
    {shareButton}
  </ParticipantDataHeaderActions>
</ParticipantDataHeader>

children / className / HTML header props: Content header with a minimum height of 56px and a bottom border. Compose it within the page main landmark, below ProductHeader.

ParticipantDataHeaderContext

<ParticipantDataHeaderContext>
  <SidebarTrigger />
  {breadcrumb}
</ParticipantDataHeaderContext>

children / className / HTML div props: Flexible context row. The caller supplies the sidebar trigger, divider, and semantic breadcrumb. SidebarTrigger requires SidebarProvider; breadcrumbs must handle long labels.

ParticipantDataHeaderActions

<ParticipantDataHeaderActions>{bookmarkToggle}{shareButton}</ParticipantDataHeaderActions>

children / className / HTML div props: A compact action row that does not shrink. The caller owns bookmark state, disabled states, sharing, and accessible action labels.