Design System/Atoms/Command

Command

Composable command menu for search, navigation, and actions with keyboard support.

Atom

Overlay · Command

When To Use

  • Use Command when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Move focus into the overlay when it opens and return focus to the trigger when it closes.
  • Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
  • Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Key Props / API

Props

onSelect, heading, value, keywords, disabled

Key exports

Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem

Example Code

import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@hilum/ui"

<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandItem value="calendar" keywords={["calendar"]}>Calendar</CommandItem>
    <CommandItem value="settings" keywords={["settings"]}>Settings</CommandItem>
    <CommandEmpty />
  </CommandList>
</Command>

Command · Basic

Basic

Inline command menu with search filtering and empty state

No results found.
Calendar
Search Emoji
Settings
Profile
Documentation

Command · With groups

With groups

Items organized into labeled groups with a separator

No results found.

Suggestions

Calendar
Search Emoji
Calculator

Settings

Profile
Billing
Settings

Command · With shortcuts

With shortcuts

Items with keyboard shortcut hints aligned to the right

No results found.
New File⌘N
Open⌘O
Save⌘S
Find⌘F
Dashboard⌘D
Preferences⌘,

Command · With icons

With icons

Items with leading Lucide icons in grouped sections

No results found.

Create

New Document
New Calendar Event

Navigate

Profile
Settings
Billing
Help

Command · In dialog

In dialog

Command palette triggered by a button or ⌘K keyboard shortcut