supabase/apps/design-system/registry/default/example/commandmenu-badge.tsx

import { Button } from 'ui'
import {
  BadgeExperimental,
  CommandMenu,
  CommandMenuInput,
  CommandMenuList,
  CommandProvider,
  useRegisterCommands,
  useSetCommandMenuOpen,
} from 'ui-patterns/CommandMenu'

function Commands() {
  useRegisterCommands('Commands', [
    {
      id: 'experimental',
      name: 'Experimental',
      action: () => alert('You triggered an experimental command'),
      badge: () => <BadgeExperimental />,
    },
  ])

  return null
}

function CommandMenuTrigger() {
  const setOpen = useSetCommandMenuOpen()

  return <Button onClick={() => setOpen(true)}>Open command menu</Button>
}

export default function CommandMenuDemo() {
  return (
    <CommandProvider openKey="">
      <CommandMenuTrigger />
      <Commands />
      <CommandMenu>
        <CommandMenuInput />
        <CommandMenuList />
      </CommandMenu>
    </CommandProvider>
  )
}