Skip to main content
Our docs redesign is live!

ConciergeTrigger

Header button that toggles the ConciergeDrawer. Used in DesktopNavigation as a labelled "Ask Dex" pill grouped with the search input, and in MobileNavigation as an icon (beside search from the tab breakpoint; alone before the menu on narrow phones).

components/molecules/concierge/ConciergeTrigger.tsx

Props

PropTypeRequiredDefaultDescription
variant'label' | 'icon'no'label'label: "Ask Dex" pill with sparkle icon. icon: sparkle icon button
classNamestringno—Extra classes

Notes

  • Must render inside ConciergeProvider (uses useConcierge().toggleDrawer).
  • Hidden when CONCIERGE_ENABLED=false (no provider, trigger, or drawer mounted).
  • Label variant uses h-10 to match the search pill height.
  • Label variant uses a CSS-only gradient border (.ask-dex-trigger in styles/globals.css): surface fill on the padding box, green → blue → amethyst stroke on the border box, soft glow via box-shadow. Slow border-angle animation; disabled under prefers-reduced-motion.
  • Sparkle icon uses the same green → blue → amethyst gradient via a tiny linearGradient def (no custom SVG paths).
  • Tooltip advertises the ⌘I / Ctrl+I shortcut.