Help launcher
Floating pill trigger that opens a non-modal, token-driven popover of short help destinations. Each consumer-supplied option is a live link, download or clearly unavailable row.
Experimental · Organism
Example
Open the standalone example. Static HTML rendered from the Default Storybook story, with generated tokens and the component's own CSS.
When to use
Two to five contextual contact, help or resource destinations need a persistent entry point without interrupting the current page.
Not for: Primary navigation, a substantial workflow or long support content; use a page, dialog or sheet instead.
Parameters
| Name | Type | Required | Default |
|---|---|---|---|
triggerIcon | ReactNode | Yes | — |
triggerLabel | string | Yes | — |
heading | string | Yes | — |
options | HelpLauncherOption[] | Yes | — |
open | boolean | No | — |
defaultOpen | boolean | No | false |
onOpenChange | (open: boolean) => void | No | — |
Variants
link option, download option, disabled option
Tokens and dependencies
Tokens: spacing-0, spacing-1, spacing-2, spacing-3, spacing-4, spacing-6, spacing-8, spacing-24, font-primary, text-xs, text-sm, text-base, weight-semibold, weight-bold, leading-normal, leading-snug, color-bg, color-bg-muted, color-text, color-text-secondary, color-text-muted, color-border, color-border-subtle, color-cta, color-cta-hover, color-on-cta, color-focus-ring, border-width, radius-full, radius-lg, shadow-lg, focus-width, focus-offset, z-modal, transition-fast.
Builds on: button, dialog, icon.
Source
Canonical contract: components/help-launcher/SPEC.md. React binding: components/help-launcher/react/HelpLauncher.tsx. Css binding: components/help-launcher/help-launcher.css.