Composer menu

import ComposerMenu from "@/pages/harness/ComposerMenu";

ComposerMenu is a button that says what it sets and its current value, "Output Auto" or "Format LinkedIn · Square", and opens a list to change it. The button is the product Button and the list is the dropdown menu, so it looks and behaves like every other menu. It started under the Home composer and is now also the filter menu in the Library and the creative editor's toolbar.

UsageCopy Anchor Link

Pass the label, the current value, the options and onChange. Each option has an id and a label, and can have a description and an icon. The icon of the chosen option also shows on the button.

const OUTPUTS = [
  { id: "auto", label: "Auto", description: "Chat, dashboards and answers, from your request", icon: Sparkle },
  { id: "landing", label: "Landing page", description: "Built from your published components", icon: Layout },
  { id: "creative", label: "Ad creative", description: "For LinkedIn and Meta, in your design system", icon: ImageSquare },
];

const [output, setOutput] = useState("auto");

<ComposerMenu label="Output" value={output} options={OUTPUTS} onChange={setOutput} />

In the composer trayCopy Anchor Link

Under the white text box, the grey tray holds the options that shape what gets built. They use variant="ghost", so they read as quieter than Output in the box above. Wrap them in composer-tools composer-tools--wrap (from composerMenu.css): a flex row with a 4px gap that wraps when the options do not fit.

<div className="composer-tools composer-tools--wrap px-2.5 py-1.5">
  <ComposerMenu label="Type" value={kindId} options={KIND_OPTIONS} onChange={setKindId} variant="ghost" />
  <ComposerMenu label="Style" value={styleId} options={STYLE_OPTIONS} onChange={setStyleId} variant="ghost" />
  <ComposerMenu label="Format" value={formatId} options={FORMAT_OPTIONS} onChange={setFormatId} variant="ghost" />
</div>

The tray changes with Output: Ad creative shows Type, Style and Format, Landing page shows Template, and Auto shows none. For the whole composer, see Chat composer.

As a filterCopy Anchor Link

The Library uses it for its Folder, Status and Type filters, with the default secondaryGhost variant and the count in each label instead of a description.

<ComposerMenu
  label="Status"
  value={filter}
  options={STATUS_FILTERS.map((f) => ({ id: f.id, label: `${f.label} ${count(f.id)}` }))}
  onChange={setFilter}
/>

AlignmentCopy Anchor Link

The list opens below the button, 6px away, lined up with its left edge. Use align="end" when the button sits at the right of its row, so the list lines up with the right edge and stays on screen.

<ComposerMenu label="Output" value={output} options={OUTPUTS} onChange={setOutput} align="end" />

AnatomyCopy Anchor Link

PropsCopy Anchor Link

There is no disabled prop for the whole menu and no className.

AccessibilityCopy Anchor Link

• The menu is Base UI's. The button gets aria-haspopup and aria-expanded; arrow keys move through the options, typing jumps to a match, Enter picks one, and Escape closes the list and returns focus to the button.
• The button's accessible name is its text, such as "Output Auto", so people hear the current value.
• The chosen option is marked with aria-current, not as a checked radio item, so screen readers may not say which option is chosen. If a menu needs that announced, build it with DropdownMenuRadioGroup and DropdownMenuRadioItem instead.

When to use itCopy Anchor Link

Do and don'tCopy Anchor Link

• Do keep label to one word that names the setting: Output, Format, Template, Status.
• Do put the count in the option label for filters, as the Library does.
• Don't use it for actions. Every option sets a value; for actions, use the dropdown menu directly.
• Don't use it to navigate. The "Design system" button in the Home tray looks like a ComposerMenu but is a plain ghost Button with composer-menu__value, because it opens the Library.

Where it is usedCopy Anchor Link

The component is src/pages/harness/ComposerMenu.jsx, with its styles in src/pages/harness/composerMenu.css.