WAfM components

Profile mode tabs

Switch between individual profiles and comparison mode.

Profile mode playground

Explore modes and states. Drag the right edge to resize the frame.

Properties

Mode

Selected profiles

Maximum profiles

Individual accessible label

Comparison label

Disabled

Individual mode is the default. The comparison counter appears in comparison mode; zero selected profiles still allows switching.

Profile mode states

Switch between an individual profile and comparison mode. Individual mode is the default; comparison is available even with zero profiles selected.

State 1 · Individual (default)

State 2 · Comparison

Color tokens

Color roles used by ProfileModeTabs in light and dark themes.

Semantic names follow Category / Subcategory / State. Each role maps to an existing CSS token; values below are the base colors before opacity. Disabled controls use 50% opacity and selected tabs use the shared small shadow.

Semantic name	CSS token	Light	Dark	Usage
Surface / Tabs / Default	--muted	`#f4f5f6`	`#212224`	Segmented control background.
Surface / Tab / Selected	--card	`#ffffff`	`#0e0f13`	Raised selected tab.
Content / Tab / Default	--foreground	`#1d212d`	`#f8f8f8`	Individual-profile icon.
Content / Tab / Unselected	--muted-foreground	`#656972`	`#abaeb5`	Inactive comparison icon and label.
Content / Comparison / Selected	--wafm-compare	`#3b82f6`	`#3b82f6`	Selected comparison icon and label.
Content / Counter / Default	--muted-foreground	`#656972`	`#abaeb5`	Comparison count, rendered at 50% opacity.
Border / Tab / Focus	--ring	`#2b3762e5`	`#455380`	Keyboard focus border and ring; ring uses 50% opacity.

Usage and props

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

ProfileModeTabs

import { ProfileModeTabs } from '@wafm/ui/components/profile-mode-tabs'
import { TabsContent } from '@wafm/ui/components/tabs'

<ProfileModeTabs value={mode} onValueChange={setMode} selectedCount={2} maxCount={6}>
  <TabsContent value="single">Individual profile</TabsContent>
  <TabsContent value="compare">Selected profiles</TabsContent>
</ProfileModeTabs>

value / defaultValue: 'single' or 'compare'. Defaults to 'single'; value provides controlled selection.
onValueChange: Called with the selected mode. Supports pointer and keyboard interaction.
selectedCount / maxCount: Defaults to 0 / 6. Count appears only in comparison mode. The application owns selection and enforces the limit; zero does not disable comparison.
singleLabel / compareLabel: Accessible individual-tab label (Einzelprofil) and visible comparison label (Vergleichen). Both icons use Phosphor duotone to match Figma and are hidden from assistive technology.
disabled: Disables both tabs. Defaults to false.
children / className: Compose matching TabsContent panels. Default control width is 232px and height is 38px; className can adjust the root width.