Action Panel

API Reference
ActionPanel
Exposes a list of actions that can be performed by the user.
Often items are context-aware, e.g., based on the selected list item. Actions can be grouped into semantic sections and can have keyboard shortcuts assigned.
The first and second action become the primary and secondary action. They automatically get the default keyboard shortcuts assigned. In List, Grid, and Detail, this is ↵ for the primary and ⌘ ↵ for the secondary action. In Form it's ⌘ ↵ for the primary and ⌘ ⇧ ↵ for the secondary. Keep in mind that while you can specify an alternative shortcut for the primary and secondary actions, it won't be displayed in the Action Panel.
Example
import { ActionPanel, Action, List } from "@raycast/api";
​
export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <Action.OpenInBrowser url="https://github.com/raycast/extensions/pull/1" />
            <Action.CopyToClipboard
              title="Copy Pull Request URL"
              content="https://github.com/raycast/extensions/pull/1"
            />
          </ActionPanel>
        }
      />
    </List>
  );
}
Props
Prop
Description
Type
Default
children
Sections or Actions. If Action elements are specified, a default section is automatically created.
​ActionPanel.Children​
-
title
The title displayed at the top of the panel
string
-
ActionPanel.Section
A group of visually separated items.
Use sections when the ActionPanel contains a lot of actions to help guide the user to related actions. For example, create a section for all copy actions.
Example
import { ActionPanel, Action, List } from "@raycast/api";
​
export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <ActionPanel.Section title="Copy">
              <Action.CopyToClipboard title="Copy Pull Request Number" content="#1" />
              <Action.CopyToClipboard
                title="Copy Pull Request URL"
                content="https://github.com/raycast/extensions/pull/1"
              />
              <Action.CopyToClipboard title="Copy Pull Request Title" content="Docs: Update API Reference" />
            </ActionPanel.Section>
            <ActionPanel.Section title="Danger zone">
              <Action title="Close Pull Request" onAction={() => console.log("Close PR #1")} />
            </ActionPanel.Section>
          </ActionPanel>
        }
      />
    </List>
  );
}
Props
Prop
Description
Type
Default
children
The item elements of the section.
​ActionPanel.Section.Children​
-
title
Title displayed above the section
string
-
ActionPanel.Submenu
A very specific action that replaces the current ActionPanel with its children when selected.
This is handy when an action needs to select from a range of options. For example, to add a label to a GitHub pull request or an assignee to a todo.
Example
import { Action, ActionPanel, Color, Icon, List } from "@raycast/api";
​
export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <ActionPanel.Submenu title="Add Label">
              <Action
                icon={{ source: Icon.Circle, tintColor: Color.Red }}
                title="Bug"
                onAction={() => console.log("Add bug label")}
              />
              <Action
                icon={{ source: Icon.Circle, tintColor: Color.Yellow }}
                title="Enhancement"
                onAction={() => console.log("Add enhancement label")}
              />
              <Action
                icon={{ source: Icon.Circle, tintColor: Color.Blue }}
                title="Help Wanted"
                onAction={() => console.log("Add help wanted label")}
              />
            </ActionPanel.Submenu>
          </ActionPanel>
        }
      />
    </List>
  );
}
Props
Prop
Description
Type
Default
title*
The title displayed for submenu.
string
-
autoFocus
Indicates whether the ActionPanel.Submenu should be focused automatically when the parent ActionPanel (or Actionpanel.Submenu) opens.
boolean
-
children
Items of the submenu.
​ActionPanel.Submenu.Children​
-
filtering
Toggles Raycast filtering. When true, Raycast will use the query in the search bar to filter the items. When false, the extension needs to take care of the filtering.
boolean or { keepSectionOrder: boolean }
false when onSearchTextChange is specified, true otherwise.
icon
The icon displayed for the submenu.
​Image.ImageLike​
-
isLoading
Indicates whether a loading indicator should be shown or hidden next to the search bar
boolean
false
shortcut
The keyboard shortcut for the submenu.
​Keyboard.Shortcut​
-
throttle
Defines whether the onSearchTextChange handler will be triggered on every keyboard press or with a delay for throttling the events. Recommended to set to true when using custom filtering logic with asynchronous operations (e.g. network requests).
boolean
false
onOpen
Callback that is triggered when the Submenu is opened.
() => void
-
onSearchTextChange
Callback triggered when the search bar text changes.
(text: string) => void
-
Types
ActionPanel.Children
ActionPanel.Children: ActionPanel.Section | ActionPanel.Section[] | ActionPanel.Section.Children | null
Supported children for the ActionPanel component.
ActionPanel.Section.Children
ActionPanel.Section.Children: Action | Action[] | ReactElement<ActionPanel.Submenu.Props> | ReactElement<ActionPanel.Submenu.Props>[] | null
Supported children for the ActionPanel.Section component.
ActionPanel.Submenu.Children
ActionPanel.Children: ActionPanel.Section | ActionPanel.Section[] | ActionPanel.Section.Children | null
Supported children for the ActionPanel.Submenu component.

Prop	Description	Type	Default
children	Sections or Actions. If Action elements are specified, a default section is automatically created.	`ActionPanel.Children`	-
title	The title displayed at the top of the panel	`string`	-

Prop	Description	Type	Default
children	The item elements of the section.	`ActionPanel.Section.Children`	-
title	Title displayed above the section	`string`	-

Prop	Description	Type	Default
title*	The title displayed for submenu.	`string`	-
autoFocus	Indicates whether the ActionPanel.Submenu should be focused automatically when the parent ActionPanel (or Actionpanel.Submenu) opens.	`boolean`	-
children	Items of the submenu.	`ActionPanel.Submenu.Children`	-
filtering	Toggles Raycast filtering. When `true`, Raycast will use the query in the search bar to filter the items. When `false`, the extension needs to take care of the filtering.	`boolean` or `{ keepSectionOrder: boolean }`	`false` when `onSearchTextChange` is specified, `true` otherwise.
icon	The icon displayed for the submenu.	`Image.ImageLike`	-
isLoading	Indicates whether a loading indicator should be shown or hidden next to the search bar	`boolean`	`false`
shortcut	The keyboard shortcut for the submenu.	`Keyboard.Shortcut`	-
throttle	Defines whether the `onSearchTextChange` handler will be triggered on every keyboard press or with a delay for throttling the events. Recommended to set to `true` when using custom filtering logic with asynchronous operations (e.g. network requests).	`boolean`	`false`
onOpen	Callback that is triggered when the Submenu is opened.	`() => void`	-
onSearchTextChange	Callback triggered when the search bar text changes.	`(text: string) => void`	-

Last modified 4mo ago