Skip to content

CommandItem

Source: client/lib/theme/vueda-tailwind/controls/index.js

A single result row inside a CommandGroup.root. See also: ComboboxItem.root; identical highlight + disabled + icon-tint recipe so result rows feel the same across both pickers. Command differs only at the row's trailing edge, where CommandShortcut.root (rather than ComboboxItemIndicator.root) marks the kbd hint for invoking the action.

Vue component: CommandItem

SlotDefault classesDescription
root3 classesA single result row inside a CommandGroup.root. See also: ComboboxItem.root; identical highlight + disabled + icon-tint recipe so result rows feel the same across both pickers. Command differs only at the row's trailing edge, where CommandShortcut.root (rather than ComboboxItemIndicator.root) marks the kbd hint for invoking the action.

root

A single result row inside a CommandGroup.root. See also: ComboboxItem.root; identical highlight + disabled + icon-tint recipe so result rows feel the same across both pickers. Command differs only at the row's trailing edge, where CommandShortcut.root (rather than ComboboxItemIndicator.root) marks the kbd hint for invoking the action.

Default classes:

text
data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground active:bg-accent-active active:text-accent-foreground
[&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none
data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4

Source: client/lib/theme/vueda-tailwind/controls/CommandItem.theme.js:17

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2