Command
A search-first menu of actions and places, opened from the keyboard.
Left out of Brand expressive Command serves expert users who type to jump anywhere. Brand expressive serves new customers deciding if they care, who come from social posts on their phones. Use instead: Navigation menu, Drawer
See it live
Start Storybook to see it live:
npm run storybookWhen to use it
- Use it when: Expert users who want to jump anywhere or run any action by typing.
- Not when: The only way to reach an action, or people who visit now and then.
Instead:
- Dropdown menu: A short menu from a button.
- Combobox: Picking a value for a field.
Words
- Headlines are short and bold. Three to six words.
- Verbs that move: Join, Try, Go.
- Playful in headlines, plain in errors.
- Use: Join, Drop, Go, Love. Avoid: Synergy, Leverage, Kindly.
The labels components use, from the voice tokens:
content.action.commit: Gocontent.action.cancel: Not nowcontent.action.destroy: Removecontent.action.retry: Try againcontent.action.empty-action: Explore the drop
See Voice and tone for the whole voice.
Accessibility and keyboard
| Keyboard | What happens | Not |
|---|---|---|
| undefined | A shortcut opens it; arrows move; Enter runs; Escape closes. | undefined |
Test before you ship:
- Results are a list; the active result is announced. undefined
Use it in code
npx open-ds add command
The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.
Tokens it reads
Command reads 38 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Command's tokens to change Command alone.
Changes with theme
Brand expressive decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.
| Part | Its token and the semantic it aliases | Value |
|---|---|---|
| Command | ||
| Corner | component.command.radiusradius.controlvar(--command-radius) | radius.999:9999px |
| Fill Changes with theme | component.command.backgroundcolor.surface.raisedvar(--command-background) | Lighttaupe.light.0:#FFFFFFDarktaupe.dark.100:#33241F |
| Text Changes with theme | component.command.labelcolor.text.primaryvar(--command-label) | Lighttaupe.light.900:#1F1411Darktaupe.dark.900:#FFF8F3 |
| Padding, left and right | component.command.padding-xcomponent-spacing-map.x2var(--command-padding-x) | space.8:0.5rem |
| Weight | component.command.font-weighttype.label.font-weightvar(--command-font-weight) | font.weight.700:700 |
| Label 2 Changes with theme | component.command.label-2color.text.mutedvar(--command-label-2) | Lighttaupe.light.600:#6B544ADarktaupe.dark.400:#B5988A |
| Padding, top and bottom | component.command.padding-ycomponent-spacing-map.x3var(--command-padding-y) | space.24:1.5rem |
| Icon size | component.command.icon-sizesize.iconvar(--command-icon-size) | size.20:1.25rem |
| Disabled opacity | component.command.disabled-opacityopacity.disabledvar(--command-disabled-opacity) | opacity.40:0.4 |
| Input | ||
| Wrapper gap | component.command.input.wrapper.gapspace.gap.defaultvar(--command-input-wrapper-gap) | space.16:1rem |
| Wrapper padding x | component.command.input.wrapper.padding-xcomponent-spacing-map.x3var(--command-input-wrapper-padding-x) | space.24:1.5rem |
| Corner | component.command.input.radiusradius.controlvar(--command-input-radius) | radius.999:9999px |
| Padding, top and bottom | component.command.input.padding-ycomponent-spacing-map.x3var(--command-input-padding-y) | space.24:1.5rem |
| Text size | component.command.input.font-sizetype.body.font-sizevar(--command-input-font-size) | font.size.17:1.0625rem |
| Label placeholder Changes with theme | component.command.input.label-placeholdercolor.text.mutedvar(--command-input-label-placeholder) | Lighttaupe.light.600:#6B544ADarktaupe.dark.400:#B5988A |
| Disabled opacity disabled when disabled | component.command.input.disabled-opacity-disabledopacity.disabledvar(--command-input-disabled-opacity-disabled) | opacity.40:0.4 |
| Empty | ||
| Padding, top and bottom | component.command.empty.padding-ycomponent-spacing-map.x6var(--command-empty-padding-y) | space.48:3rem |
| Text size | component.command.empty.font-sizetype.body.font-sizevar(--command-empty-font-size) | font.size.17:1.0625rem |
| Group | ||
| Padding | component.command.group.paddingcomponent-spacing-map.x1var(--command-group-padding) | space.4:0.25rem |
| Text Changes with theme | component.command.group.labelcolor.text.primaryvar(--command-group-label) | Lighttaupe.light.900:#1F1411Darktaupe.dark.900:#FFF8F3 |
| Padding, left and right | component.command.group.padding-xcomponent-spacing-map.x2var(--command-group-padding-x) | space.8:0.5rem |
| Padding, top and bottom | component.command.group.padding-ycomponent-spacing-map.x2var(--command-group-padding-y) | space.8:0.5rem |
| Text size | component.command.group.font-sizetype.caption.font-sizevar(--command-group-font-size) | font.size.14:0.875rem |
| Weight | component.command.group.font-weighttype.label.font-weightvar(--command-group-font-weight) | font.weight.700:700 |
| Label 2 Changes with theme | component.command.group.label-2color.text.mutedvar(--command-group-label-2) | Lighttaupe.light.600:#6B544ADarktaupe.dark.400:#B5988A |
| Separator | ||
| Fill Changes with theme | component.command.separator.backgroundcolor.border.defaultvar(--command-separator-background) | Lighttaupe.light.200:#F2DCCFDarktaupe.dark.100:#33241F |
| Item | ||
| Gap | component.command.item.gapspace.gap.defaultvar(--command-item-gap) | space.16:1rem |
| Corner | component.command.item.radiusradius.badgevar(--command-item-radius) | radius.999:9999px |
| Padding, left and right | component.command.item.padding-xcomponent-spacing-map.x2var(--command-item-padding-x) | space.8:0.5rem |
| Padding, top and bottom | component.command.item.padding-ycomponent-spacing-map.x2var(--command-item-padding-y) | space.8:0.5rem |
| Text size | component.command.item.font-sizetype.body.font-sizevar(--command-item-font-size) | font.size.17:1.0625rem |
| Disabled opacity disabled when disabled | component.command.item.disabled-opacity-disabledopacity.disabledvar(--command-item-disabled-opacity-disabled) | opacity.40:0.4 |
| Background selected Changes with theme when selected | component.command.item.background-selectedcolor.surface.sunkenvar(--command-item-background-selected) | Lighttaupe.light.100:#FCEFE6Darktaupe.dark.100:#33241F |
| Label selected Changes with theme when selected | component.command.item.label-selectedcolor.text.primaryvar(--command-item-label-selected) | Lighttaupe.light.900:#1F1411Darktaupe.dark.900:#FFF8F3 |
| Icon size | component.command.item.icon-sizesize.iconvar(--command-item-icon-size) | size.20:1.25rem |
| Text Changes with theme | component.command.item.labelcolor.text.mutedvar(--command-item-label) | Lighttaupe.light.600:#6B544ADarktaupe.dark.400:#B5988A |
| Shortcut | ||
| Text size | component.command.shortcut.font-sizetype.caption.font-sizevar(--command-shortcut-font-size) | font.size.14:0.875rem |
| Text Changes with theme | component.command.shortcut.labelcolor.text.mutedvar(--command-shortcut-label) | Lighttaupe.light.600:#6B544ADarktaupe.dark.400:#B5988A |
| From the system | ||
| Edge Changes with theme | color.border.default straight from the system, through --border | Lighttaupe.light.200 · #F2DCCFDarktaupe.dark.100 · #33241F |