A reusable client-side button component that triggers AI enrichment actions, featuring a sparkles icon, loading state, and configurable size/variant options. ## Key Components ### `AIEnrichButtonProps` | Prop | Type | Default | Description | |------|------|---------|-------------| | `onClick` | `() => void` | — | Handler called on button click | | `disabled` | `boolean` | `false` | Disables the button | | `loading` | `boolean` | `false` | Shows loading state and swaps label | | `label` | `string` | `'AI Enrich'` | Default button text | | `loadingLabel` | `string` | `'Enriching...'` | Text shown during loading | | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size | | `variant` | `'primary' \| 'secondary' \| 'outline'` | `'outline'` | Visual style | | `className` | `string` | — | Additional CSS classes | ### `AIEnrichButton` The exported functional component. Internally maps the `size` and `variant` props to the underlying `Button` component's accepted values, and hides the `SparklesIcon` while loading. ## Usage Example ```typescript import { AIEnrichButton } from './components/AIEnrichButton' function TicketForm() { const [enriching, setEnriching] = React.useState(false) const handleEnrich = async () => { setEnriching(true) await enrichTicketWithAI() setEnriching(false) } return ( ) } ``` > The button automatically disables itself during loading (`disabled || loading`), preventing duplicate submissions while Mingo AI processes the enrichment request.