Command Component

Overview

Purpose

The Command component command palette modal for keyboard-driven search and action execution.within our design system. It follows our composer layer principles, ensuring consistency and reusability across applications.

When to Use

Use when you need triggering user interactions
Appropriate for actions contexts
Follows composer component patterns

When Not to Use

Avoid when simpler alternatives exist
Don't use for navigation or form submission
Consider alternatives for edge cases

Live Example

import React from 'react';
import Command from './components/Command';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Command {...props}>
        {props.children || 'Example command content'}
      </Command>
    </div>
  );
}

Open Sandbox

Anatomy

Understanding the structure of the Command component helps ensure proper implementation and customization.

Property	Description	Type
root	Slot rendered into [data-slot="command"].	Root
dialog	Slot rendered into [data-slot="command-dialog"].	Slot
group	Slot rendered into [data-slot="command-group"].	Slot
input	Slot rendered into [data-slot="command-input"].	Slot
item	Slot rendered into [data-slot="command-item"].	Slot
items	Slot rendered into [data-slot="command-items"].	Slot
list	Slot rendered into [data-slot="command-list"].	Slot
separator	Slot rendered into [data-slot="command-separator"].	Slot
overlay	Overlay region of the component.	Part
inputWrapper	Input wrapper region of the component.	Part
searchIcon	Search icon region of the component.	Part
empty	Empty region of the component.	Part
groupHeading	Group heading region of the component.	Part
groupItems	Group items region of the component.	Part
itemIcon	Item icon region of the component.	Part
itemContent	Item content region of the component.	Part
itemLabel	Item label region of the component.	Part
itemDescription	Item description region of the component.	Part

Variants & States

import React from 'react';
import Command from './components/Command';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Command {...props}>
        {props.children || 'Example command content'}
      </Command>
    </div>
  );
}

Open Sandbox

API Reference

Props

Name	Type	Required	Default	Description
`children`	`React.ReactNode`	Yes	—	—

Accessibility

Standards Compliance

This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.

Accessibility Checklist

○ Keyboard navigation support
○ Screen reader compatibility
○ Color contrast compliance
○ Focus management
○ ARIA attributes
○ Reduced motion support

Usage Guidelines

Do

Use consistent spacing and sizing
Follow established patterns
Provide clear labels and descriptions
Test with assistive technologies

Don't

Override core functionality
Use without proper context
Ignore accessibility requirements
Modify without design system approval

Examples

Basic Usage

Simple implementation with default props and common configurations.

import React from 'react';
import Command from './components/Command';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Command {...props}>
        {props.children || 'Example command content'}
      </Command>
    </div>
  );
}

Open Sandbox

Advanced Usage

Complex patterns including composition, state management, and real-world scenarios.

import React from 'react';

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem'
    }}>
      <h3>Command - Advanced Patterns</h3>
      <p>Advanced usage patterns for Command include:</p>
      <ul>
        <li>Composition with other components</li>
        <li>Custom styling and theming</li>
        <li>Controlled vs uncontrolled patterns</li>
        <li>Form integration</li>
        <li>Accessibility enhancements</li>
      </ul>
      <p style={{ color: '#6b7280', fontStyle: 'italic' }}>
        Full advanced examples coming soon.
      </p>
    </div>
  );
}

Open Sandbox

Development Tools

Use these tools to analyze the component's performance, design tokens, and accessibility during development.

Contribute

Help us improve the Command component documentation. Found an issue or have suggestions?

Edit this page Report an issue Contribution guidelines

Command

Overview

Purpose

When to Use

When Not to Use

Live Example

Anatomy

Variants & States

API Reference

Props

Accessibility

Standards Compliance

Accessibility Checklist

Usage Guidelines

Do

Don't

Examples

Basic Usage

Advanced Usage

Development Tools

Contribute

Related Components

Action Bar

Button

ContextMenu

Dropdown

FilterBar

IconButton