Storybook stories for `QuickActionChipButton`, covering all visual variants, icon formats, and interaction states used across chat empty states, marketing marquee strips, and ROI table task cells. ## Key Components | Export | Description | |---|---| | `Default` | Bordered `outline` chip with a config glyph tinted flamingo-pink | | `Primary` | Accent (yellow) `primary` variant chip | | `AccentTints` | Config glyphs using `pink`, `cyan`, and arbitrary CSS color `accent` values | | `AgentMarks` | Agent-format icons (`fae`, `mingo`) that carry their own colors | | `NoIcon` | Label-only chip with no icon | | `NonInteractive` | Decorative `` (non-focusable) for marquee strips and ROI table cells | | `HoverCallbacks` | Demonstrates `onHoverStart`/`onHoverEnd` for prompt preview/restore behavior | | `Gallery` | All variants rendered side by side | ## Usage Example ```typescript import { QuickActionChipButton, type QuickActionIconSpec } from '../components/chat/quick-action-chip' // Config-format icon: name resolved by , tinted via accent const icon: QuickActionIconSpec = { name: 'search', accent: 'pink' } // Interactive chip (button, focusable, hover callbacks) console.log('selected')} onHoverStart={() => console.log('preview prompt')} onHoverEnd={() => console.log('restore composer')} /> // Agent-format icon (self-colored, accent ignored) {}} /> // Decorative (non-interactive Tag, no button or focus ring) ``` ## Icon Format Reference | Format | Example | Behavior | |---|---|---| | Agent | `{ name: 'fae' \| 'mingo' }` | Renders packaged agent mark; `accent` ignored | | Config | `{ name, accent: 'pink' \| 'cyan' }` | Glyph tinted with brand token | | Config | `{ name, accent: '#8b5cf6' }` | Glyph tinted with arbitrary CSS color | | Config | `{ name, props: { color } }` | Explicit `props.color` wins over `accent` | **Source:** [`QuickActionChip.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/QuickActionChip.stories.tsx)