Command
NavigationBeta
v0.9.0Command palette for quick navigation and actions. Built on cmdk. Typically opened with ⌘K.
Quick Import
import { Command } from "@cohere-ai/waypoint-ui/command";Live Preview
Loading Command...
Props
| Name | Type | Default | Description |
|---|---|---|---|
title (CommandDialog) | string | 'Command Palette' | Accessible dialog title (sr-only) |
description (CommandDialog) | string | 'Search for a command to run...' | Accessible description (sr-only) |
showCloseButton (CommandDialog) | boolean | false | Whether to show a visible close button |
variant (CommandInput) | 'default' | 'outline' | 'default' | Input visual style |
variant (CommandGroup) | 'default' | 'cozy' | 'default' | Controls padding/spacing of items |
Examples
Command Palette
Full command palette dialog with search and grouped items
1 import { 2 CommandDialog, CommandInput, CommandList, 3 CommandGroup, CommandItem, CommandEmpty, 4 } from '@cohere-ai/waypoint-ui/command'; 5 6 <CommandDialog open={open} onOpenChange={setOpen}> 7 <CommandInput placeholder="Type a command or search..." /> 8 <CommandList> 9 <CommandEmpty>No results found.</CommandEmpty> 10 <CommandGroup heading="Suggestions"> 11 <CommandItem>Calendar</CommandItem> 12 <CommandItem>Search</CommandItem> 13 <CommandItem>Settings</CommandItem> 14 </CommandGroup> 15 </CommandList> 16 </CommandDialog>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Command component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.