WAfM components

Product header

Compose company identity and global actions above the application workspace.

Product header playground

Edit the company name and compose or disable actions. Resize the frame to inspect truncation.

Choose an action to inspect its callback.

Properties

Company name

Include help action

Disable actions

Brand and action slots contain caller-owned content. These demo buttons report local callbacks; they do not navigate or change an account.

Usage and props

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

ProductHeader

import { ProductHeader, ProductHeaderBrand, ProductHeaderActions } from '@wafm/ui/components/product-header'
import { Button } from '@wafm/ui/components/button'

<ProductHeader>
  <ProductHeaderBrand>LüneFuture GmbH</ProductHeaderBrand>
  <ProductHeaderActions>
    <Button variant="ghost" onClick={onHelp}>Hilfe</Button>
    {accountMenu}
  </ProductHeaderActions>
</ProductHeader>

children / className / HTML header props: A 56px application header with a bottom divider using the shared border token. Place it above the sidebar and content. It only owns layout; company identity and actions come from the caller.

ProductHeaderBrand

<ProductHeaderBrand>{companyName}</ProductHeaderBrand>

children / className / HTML div props: Flexible identity slot with truncation for long names. Supply a title attribute when the full text should also be available on hover.

ProductHeaderActions

<ProductHeaderActions>{helpButton}{applicationsButton}{accountMenu}</ProductHeaderActions>

children / className / HTML div props: A row of caller-composed actions. Label icon-only controls. Routing, account state, menus, and callbacks remain outside this layout component.