ActionPanel

A container for actions the user can perform on the current item. Attach it to List.Item, Grid.Item, Detail, or Form via the actions prop.

Basic ActionPanel

import { Action, ActionPanel, List } from "@vicinae/api";

export default function Command() {
  return (
    <List>
      <List.Item
        title="Apple"
        icon="🍎"
        actions={
          <ActionPanel>
            <Action.CopyToClipboard title="Copy Emoji" content="🍎" />
            <Action.OpenInBrowser title="Wikipedia" url="https://en.wikipedia.org/wiki/Apple" />
          </ActionPanel>
        }
      />
    </List>
  );
}

Sections

Group related actions under titled sections. The first action in the first section is the default.

import { Action, ActionPanel, List } from "@vicinae/api";

export default function Command() {
  return (
    <List>
      <List.Item
        title="Apple"
        icon="🍎"
        actions={
          <ActionPanel>
            <ActionPanel.Section title="Copy">
              <Action.CopyToClipboard title="Copy Emoji" content="🍎" />
              <Action.CopyToClipboard title="Copy Name" content="Apple" />
            </ActionPanel.Section>
            <ActionPanel.Section title="Other">
              <Action.OpenInBrowser title="Wikipedia" url="https://en.wikipedia.org/wiki/Apple" />
            </ActionPanel.Section>
          </ActionPanel>
        }
      />
    </List>
  );
}

Submenu

Nest a group of actions under a submenu for less common operations.

import { Action, ActionPanel, Icon, List } from "@vicinae/api";

export default function Command() {
  return (
    <List>
      <List.Item
        title="Apple"
        icon="🍎"
        actions={
          <ActionPanel>
            <Action.CopyToClipboard title="Copy Emoji" content="🍎" />
            <ActionPanel.Submenu title="Share" icon={Icon.Link}>
              <Action.CopyToClipboard title="Copy as Markdown" content="[Apple](🍎)" />
              <Action.Paste title="Paste Emoji" content="🍎" />
            </ActionPanel.Submenu>
          </ActionPanel>
        }
      />
    </List>
  );
}