Aurora Search Pill
Ultra-premium AI search pill with rotating conic glow, 1.5px border track, and responsive search query expansion.
On This Page
Ultra-premium AI search pill with rotating conic glow, 1.5px border track, and responsive search query expansion.
Ultra-premium conversational AI search pill featuring a rotating conic gradient halo, 1.5px illuminated border track, and fluid transition between 3 pulsing dots and an active search query with overlapping source badges.
| Prop | Type | Default | Description |
|---|---|---|---|
| isSearching | boolean | undefined | Controlled searching active state. |
| defaultSearching | boolean | false | Initial searching state when uncontrolled. |
| onToggle | (isSearching: boolean) => void | — | Callback invoked whenever the pill is clicked or toggled. |
| searchLabel | string | "Search..." | Text label displayed next to source badges in the active state. |
| sources | AuroraSearchSource[] | [Web, Neural Index, GitHub] | Array of source icon badges rendered when searching is active (supports avatarUrl, icons, initials, presets). |
| sourceAvatars | string[] | undefined | Shortcut array of avatar image URLs rendered as source icons. |
| spinMode | "searching" | "always" | "hover" | "never" | "searching" | When the beam should rotate: only while searching (default), continuously, on hover, or never. |
| theme | "light" | "dark" | "auto" | "auto" | Color theme for the pill center surface. |
| size | "sm" | "md" | "lg" | "md" | Height, typography, and badge sizing scale. |
| glowIntensity | "subtle" | "medium" | "strong" | "none" | "medium" | Volumetric ambient blur glow opacity around the perimeter. |
| speed | "slow" | "normal" | "fast" | "normal" | Rotation velocity of the aurora light beam. |
| autoCycle | boolean | false | Enables automatic demo cycling between idle dots and searching. |
| cycleInterval | number | 2400 | Interval in milliseconds between autoCycle state transitions. |
| className | string | — | Additional CSS classes applied to the outer wrapper. |
Default state renders 3 pulsing dots. Clicking expands into active query with source icons.