Accessible launcher button for the Mingo AI drawer within `AppHeader`, toggling between a branded icon+wordmark and a close affordance based on active and display state. ## Key Components ### `HeaderMingoButton` A styled `` that integrates the Mingo AI branding into the app header. Implements the `HeaderButton` visual contract (full sticky-header height, `ods-card` rest / `ods-bg-hover` hover) and exposes open state via `aria-pressed`. **Props (`HeaderMingoButtonProps`):** | Prop | Type | Default | Description | |---|---|---|---| | `isActive` | `boolean` | `false` | Marks the button as pressed while the Mingo drawer is open | | `iconOnly` | `boolean` | `false` | Hides the "Mingo AI" wordmark; collapses to icon-only for narrow viewports | | `className` | `string` | — | Additional classes merged via `cn()` | **Behavior:** - When `iconOnly && isActive`: renders an `XmarkIcon` and sets `aria-label` to `"Close Mingo AI"` - Otherwise: renders `MingoIcon` with ODS cyan accent colors - When `!iconOnly`: appends the bold `"Mingo AI"` wordmark ## Usage Example ```typescript import { HeaderMingoButton } from '@openframe/ui' // Full button with wordmark (default) setIsMingoOpen(prev => !prev)} /> // Icon-only mode for mobile/narrow layouts setIsMingoOpen(prev => !prev)} /> ``` ## Notes - Designed for use inside `AppHeader`'s `divide-x` divider layout; no standalone active background is applied. - Figma reference: `7532:222103 — button-full` - Source: [`header-mingo-button.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/header-mingo-button.tsx)