import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference"

export const metadata = { title: Command Bar, }

{metadata.title}

A component that displays a command bar with a list of commands to perform on a bulk selection of items.

In this guide, you'll learn how to use the Command Bar component.

Usage

tsx

import { CommandBar } from "@medusajs/ui"

tsx

<CommandBar open={open}>
  <CommandBar.Bar>
    <CommandBar.Value>{count} selected</CommandBar.Value>
    <CommandBar.Seperator />
    <CommandBar.Command
      action={onDelete}
      label="Delete"
      shortcut="d"
    />
    <CommandBar.Seperator />
    <CommandBar.Command
      action={onEdit}
      label="Edit"
      shortcut="e"
    />
  </CommandBar.Bar>
</CommandBar>

API Reference